Utilities
Accessibility
Screen reader only text, forced colors, a focus ring, a skip link and touch targets.
6classes
22variant classes
4properties
Live example
<div class="flex flex-wrap items-center gap-4">
<button class="touch-target focus-ring rounded-lg border px-3 py-1.5 text-sm">touch-target and focus-ring</button>
<button class="rounded-lg bg-primary text-primary-foreground p-2" aria-label="Search"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="sr-only">Search</span></button>
<p class="text-sm text-muted-foreground">The icon button above has a label only screen readers hear (sr-only).</p>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:sr-only. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | focus:focus-visible: | 2 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | sm:md:lg:xl:2xl: | 2 |
| Containers | not generated | 0 |
| Media and direction | print:screen:forced-colors: | 4 |
Position 2
Variants: focus:focus-visible:sm:md:lg:xl:2xl:print:screen:forced-colors:
| Class | CSS |
|---|---|
sr-only | position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; |
not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; |
Forced color adjust 2
Variants: forced-colors:
| Class | CSS |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
Outline 1
Variants: none
| Class | CSS |
|---|---|
focus-ring | outline: var(--m-ring); outline-offset: var(--m-ring-offset); |
Min width 1
Variants: none
| Class | CSS |
|---|---|
touch-target | min-width: 44px; min-height: 44px; |