Hover Focus And Other States

import dedent from "dedent"; import { CodeExample, CodeExampleGroup, CodeBlock, svelte, html, css } from "@/components/code-example.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Iframe } from "@/components/iframe.tsx"; import { TipGood, TipBad, TipInfo } from "@/components/tips";

export const title = "Hover, focus, and other states"; export const description = "Using utilities to style elements on hover, focus, and more.";

Every utility class in Tailwind can be applied conditionally by adding a variant to the beginning of the class name that describes the condition you want to target.

For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class:

<Figure hint="Hover over this button to see the background color change"> <Example> { <div className="grid place-items-center"> <button className="rounded-full bg-sky-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-sky-700"> Save changes </button> </div> } </Example> </Figure> <details className="mb-10 rounded-xl border border-gray-200 px-6 py-3 prose open:pb-5 dark:prose-dark dark:border-gray-800"> <summary className="font-medium cursor-default select-none text-gray-900 dark:text-gray-200">How does this compare to traditional CSS?</summary>

When writing CSS the traditional way, a single class name would do different things based on the current state:

<TipBad>{<>Traditionally the same class name applies different styles on hover</>}</TipBad>

In Tailwind, rather than adding the styles for a hover state to an existing class, you add another class to the element that only does something on hover:

<TipGood>{<>In Tailwind, separate classes are used for the default state and the hover state</>}</TipGood>

Notice how hover:bg-sky-700 only defines styles for the :hover state? It does nothing by default, but as soon as you hover over an element with that class, the background color will change to sky-700.

This is what we mean when we say a utility class can be applied conditionally — by using variants you can control exactly how your design behaves in different states, without ever leaving your HTML.

</details>

Tailwind includes variants for just about everything you'll ever need, including:

• Pseudo-classes, like :hover, :focus, :first-child, and :required
• Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection
• Media and feature queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
• Attribute selectors, like [dir="rtl"] and [open]
• Child selectors, like & > * and & *

These variants can even be stacked to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover:

In this guide you'll learn about every variant available in the framework, how to use them with your own custom classes, and even how to create your own.

Pseudo-classes

:hover, :focus, and :active

Style elements on hover, focus, and active using the hover, focus, and active variants:

<Figure hint="Try interacting with this button to see the hover, focus, and active states"> <Example> { <div className="grid place-items-center"> <button type="button" className="rounded-full bg-violet-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700" > Save changes </button> </div> } </Example> </Figure>

Tailwind also includes variants for other interactive states like :visited, :focus-within, :focus-visible, and more.

See the pseudo-class reference for a complete list of available pseudo-class variants.

:first, :last, :odd, and :even

Style an element when it is the first-child or last-child using the first and last variants:

<Figure> <Example className="py-0"> { <div className="px-4"> <div className="mx-auto max-w-md border-x border-x-gray-200 dark:border-x-gray-800 dark:bg-gray-950/10"> <ul role="list" className="divide-y divide-gray-200 p-6 dark:divide-gray-800"> <li className="flex py-4 first:pt-0 last:pb-0">

} </Example>

</Figure>

You can also style an element when it's an odd or even child using the odd and even variants:

<Figure> <Example padding={false} className="py-8"> { <div className=""> <div className="border-y border-y-gray-200 bg-white dark:border-y-gray-800 dark:bg-gray-950"> <div> <div className="inline-block min-w-full align-middle"> <div className="overflow-hidden"> <table className="min-w-full"> <thead className="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950"> <tr> <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white"> Name </th> <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white"> Title </th> <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white"> Email </th> </tr> </thead> <tbody> <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"> Jane Cooper </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> Regional Paradigm Technician </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> [email protected] </td> </tr> <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"> Cody Fisher </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> Product Directives Officer </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> [email protected] </td> </tr> <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"> Leonard Krasner </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> Senior Designer </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> [email protected] </td> </tr> <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"> Emily Selman </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> VP, Hardware Engineering </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> [email protected] </td> </tr> <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"> Anna Roberts </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> Chief Strategy Officer </td> <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400"> [email protected] </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> } </Example> </Figure>

Use the nth-* and nth-last-* variants to style children based on their position in the list:

You can pass any number you want to these by default, and use arbitrary values for more complex expressions like nth-[2n+1_of_li].

Tailwind also includes variants for other structural pseudo-classes like :only-child, :first-of-type, :empty, and more.

See the pseudo-class reference for a complete list of available pseudo-class variants.

:required and :disabled

Style form elements in different states using variants like required, invalid, and disabled:

<Figure hint="Try making the email address valid to see the styles change"> <Example className="py-0"> { <div className="mx-auto max-w-md border-x border-x-gray-200 px-6 py-5 dark:border-x-gray-800 dark:bg-gray-950/10"> <form> <div> <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> Username </label> <div className="mt-1"> <input type="text" name="username" id="username" className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" defaultValue="tbone" disabled /> </div> </div> <div className="mt-6"> <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> Email </label> <div className="mt-1"> <input type="email" name="email" id="email-1" className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" defaultValue="george@krugerindustrial." placeholder="[email protected]" /> </div> </div> <div className="mt-6"> <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> Password </label> <div className="mt-1"> <input type="password" name="password" id="password" autoComplete="none" className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" defaultValue="Bosco" /> </div> </div> <div className="mt-6 text-right"> <button className="rounded-md bg-sky-500 px-5 py-2.5 text-sm leading-5 font-semibold text-white hover:bg-sky-700"> Save changes </button> </div> </form> </div> } </Example> </Figure>

Using variants for this sort of thing can reduce the amount of conditional logic in your templates, letting you use the same set of classes regardless of what state an input is in and letting the browser apply the right styles for you.

Tailwind also includes variants for other form states like :read-only, :indeterminate, :checked, and more.

See the pseudo-class reference for a complete list of available pseudo-class variants.

:has()

Use the has-* variant to style an element based on the state or content of its descendants:

<Figure> <Example className="py-0"> { <div className="mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200"> <fieldset> <legend className="text-base font-semibold text-gray-900 dark:text-white">Payment method</legend> <div className="mt-4 space-y-2"> <label htmlFor="apple" className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900" > <svg className="w-8" fill="currentColor" viewBox="0 0 24 13"> <path d="M3.96299 1.735C3.22833 1.73504 2.50814 1.9393 1.88285 2.32497C1.25756 2.71063 0.751781 3.26252 0.42199 3.919C0.144511 4.47115 0 5.08054 0 5.6985C0 6.31645 0.144511 6.92584 0.42199 7.478C0.751781 8.13447 1.25756 8.68636 1.88285 9.07202C2.50814 9.45769 3.22833 9.66195 3.96299 9.662C5.03299 9.662 5.93299 9.31 6.58999 8.705C7.33799 8.015 7.76999 6.995 7.76999 5.789C7.76976 5.51882 7.74634 5.24916 7.69999 4.983H3.96399V6.509H6.10399C6.06043 6.75276 5.96798 6.98519 5.83221 7.19228C5.69644 7.39937 5.52016 7.57684 5.31399 7.714C4.95799 7.955 4.49999 8.093 3.96399 8.093C2.92999 8.093 2.05299 7.396 1.73899 6.457C1.57315 5.96493 1.57315 5.43207 1.73899 4.94C2.05299 4 2.92999 3.304 3.96399 3.304C4.52899 3.29475 5.07496 3.50811 5.48399 3.898L6.61599 2.768C5.89873 2.09384 4.94728 1.72362 3.96299 1.735ZM10.464 2.285V9.185H11.35V6.39H12.815C13.418 6.39 13.925 6.194 14.337 5.802C14.5421 5.61815 14.705 5.39214 14.8146 5.13945C14.9242 4.88676 14.9779 4.61337 14.972 4.338C14.9762 4.06405 14.9216 3.79238 14.8121 3.54125C14.7026 3.29011 14.5406 3.06533 14.337 2.882C14.1354 2.68674 13.897 2.53337 13.6358 2.43073C13.3746 2.32809 13.0956 2.27822 12.815 2.284L10.464 2.285ZM12.891 3.135C13.0456 3.13769 13.1981 3.17139 13.3395 3.23408C13.4808 3.29678 13.6082 3.3872 13.714 3.5C13.8267 3.60959 13.9162 3.74065 13.9774 3.88544C14.0385 4.03024 14.07 4.18582 14.07 4.343C14.07 4.50017 14.0385 4.65576 13.9774 4.80055C13.9162 4.94534 13.8267 5.07641 13.714 5.186C13.6007 5.30328 13.4642 5.39562 13.3132 5.45709C13.1622 5.51857 13 5.54783 12.837 5.543H11.35V3.135H12.837C12.855 3.13458 12.873 3.13458 12.891 3.135ZM17.015 4.31C16.173 4.31 15.538 4.618 15.108 5.235L15.889 5.726C16.177 5.309 16.569 5.1 17.064 5.1C17.3798 5.09612 17.6855 5.21145 17.92 5.423C18.0354 5.51846 18.1282 5.63844 18.1915 5.77423C18.2548 5.91001 18.2871 6.05818 18.286 6.208V6.41C17.946 6.217 17.512 6.121 16.986 6.121C16.369 6.121 15.876 6.266 15.507 6.555C15.137 6.843 14.953 7.232 14.953 7.72C14.949 7.9396 14.994 8.15734 15.0848 8.35733C15.1757 8.55732 15.31 8.73451 15.478 8.876C15.828 9.184 16.263 9.339 16.783 9.339C17.393 9.339 17.881 9.069 18.248 8.529H18.286V9.184H19.134V6.275C19.134 5.665 18.944 5.185 18.566 4.835C18.186 4.485 17.67 4.31 17.015 4.31ZM19.278 4.464L21.224 8.886L20.126 11.266H21.041L24 4.463H23.035L21.667 7.854H21.647L20.241 4.464H19.278ZM17.132 6.832C17.626 6.832 18.012 6.942 18.288 7.162C18.288 7.534 18.141 7.858 17.848 8.135C17.5835 8.39951 17.225 8.54839 16.851 8.549C16.6011 8.55376 16.3573 8.47178 16.161 8.317C16.0697 8.25093 15.9954 8.16402 15.9445 8.06349C15.8935 7.96295 15.8673 7.85171 15.868 7.739C15.868 7.482 15.988 7.269 16.231 7.092C16.471 6.919 16.772 6.832 17.132 6.832Z" /> </svg> Google Pay <input name="payment_method" id="apple" value="google" type="radio" className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500" defaultChecked /> </label> <label htmlFor="google" className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900" > <svg className="mt-1 w-8 fill-current" fill="currentColor" viewBox="0 0 24 13"> <path d="M4.38526 1.86704C4.10401 2.19606 3.65392 2.45565 3.20387 2.41854C3.14762 1.97367 3.36793 1.50091 3.62579 1.20892C3.90704 0.870635 4.39932 0.62962 4.79781 0.611084C4.84468 1.07453 4.66182 1.52871 4.38526 1.86704ZM4.79312 2.50663C4.14146 2.46956 3.5836 2.87272 3.27418 2.87272C2.96012 2.87272 2.48659 2.52517 1.97092 2.53443C1.30056 2.5437 0.677025 2.91906 0.33479 3.51694C-0.368428 4.71265 0.151978 6.48308 0.831712 7.45632C1.16457 7.9383 1.56306 8.46662 2.0881 8.44809C2.58507 8.42955 2.78195 8.12834 3.38204 8.12834C3.98677 8.12834 4.16026 8.44809 4.68531 8.43882C5.2291 8.42955 5.57134 7.95688 5.9042 7.47485C6.28388 6.92799 6.43862 6.39499 6.44799 6.36718C6.43862 6.35791 5.3979 5.96402 5.38853 4.77753C5.37915 3.78576 6.20893 3.31304 6.24643 3.28524C5.77759 2.59931 5.04629 2.52517 4.79312 2.50663ZM8.55765 1.16258V8.38789H9.69212V5.91768H11.2626C12.6971 5.91768 13.7051 4.94445 13.7051 3.53552C13.7051 2.12664 12.7159 1.16262 11.3001 1.16262H8.5576L8.55765 1.16258ZM9.69212 2.10806H11.0001C11.9846 2.10806 12.5471 2.62711 12.5471 3.54011C12.5471 4.4531 11.9846 4.97684 10.9954 4.97684H9.69212V2.10806ZM15.7772 8.44345C16.4898 8.44345 17.1508 8.08664 17.4508 7.52119H17.4743V8.38785H18.5244V4.79143C18.5244 3.74868 17.6806 3.07666 16.3819 3.07666C15.1771 3.07666 14.2864 3.75795 14.2536 4.69412H15.2756C15.36 4.24921 15.7771 3.95722 16.3491 3.95722C17.043 3.95722 17.4321 4.27701 17.4321 4.86562V5.26415L16.0163 5.34756C14.6989 5.42634 13.9864 5.95934 13.9864 6.88629C13.9864 7.82245 14.7224 8.44345 15.7772 8.44345ZM16.0819 7.58607C15.4772 7.58607 15.0927 7.29876 15.0927 6.85844C15.0927 6.4043 15.4631 6.14012 16.171 6.09841L17.4321 6.01963V6.42743C17.4321 7.10408 16.8508 7.58607 16.0819 7.58607H16.0819ZM19.9261 10.3529C21.0325 10.3529 21.5529 9.93584 22.0076 8.67057L24 3.14617H22.8467L21.5107 7.41456H21.4872L20.1511 3.14617H18.9651L20.8871 8.40638L20.784 8.72618C20.6106 9.2684 20.3293 9.47698 19.8277 9.47698C19.7386 9.47698 19.5652 9.46771 19.4948 9.45844V10.3251C19.5604 10.3436 19.8417 10.3529 19.9261 10.3529Z" /> </svg> Apple Pay <input name="payment_method" id="google" value="apple" type="radio" className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500" /> </label> <label htmlFor="credit-card" className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900" > <svg className="w-8" viewBox="0 0 24 13" fill="none"> <rect stroke="currentColor" x="0.5" y="0.5" width="23" height="11" rx="1.5" /> <path fill="currentColor" d="M16.539 3.18591C16.0742 3.01652 15.5828 2.93152 15.088 2.93491C13.488 2.93491 12.358 3.74091 12.35 4.89791C12.34 5.74791 13.153 6.22691 13.768 6.51091C14.399 6.80291 14.61 6.98691 14.608 7.24791C14.604 7.64491 14.104 7.82491 13.639 7.82491C13 7.82491 12.651 7.73591 12.114 7.51291L11.915 7.41991L11.688 8.75191C12.077 8.91391 12.778 9.05291 13.502 9.06491C15.203 9.06491 16.315 8.26391 16.328 7.03291C16.342 6.35391 15.902 5.84091 14.976 5.41691C14.413 5.14191 14.064 4.95791 14.064 4.67891C14.064 4.43191 14.363 4.16791 14.988 4.16791C15.404 4.15785 15.8174 4.23589 16.201 4.39691L16.351 4.46391L16.578 3.17691L16.539 3.18591ZM20.691 3.04291H19.441C19.052 3.04291 18.759 3.14991 18.589 3.53591L16.185 8.98191H17.886L18.226 8.08891L20.302 8.09091C20.351 8.29991 20.501 8.98191 20.501 8.98191H22.001L20.691 3.04291ZM10.049 2.99291H11.67L10.656 8.93491H9.03705L10.049 2.99091V2.99291ZM5.93405 6.26791L6.10205 7.09291L7.68605 3.04291H9.40305L6.85205 8.97391H5.13905L3.73905 3.95191C3.71637 3.8691 3.66312 3.79798 3.59005 3.75291C3.08545 3.49225 2.55079 3.29444 1.99805 3.16391L2.02005 3.03891H4.62905C4.98305 3.05291 5.26805 3.16391 5.36305 3.54191L5.93305 6.27091L5.93405 6.26791ZM18.691 6.87391L19.337 5.21191C19.329 5.22991 19.47 4.86891 19.552 4.64591L19.663 5.15891L20.038 6.87291H18.69L18.691 6.87391Z" /> </svg> Credit Card <input name="payment_method" id="credit-card" value="credit-card" type="radio" className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500" /> </label> </div> </fieldset> </div> } </Example> </Figure>

You can use has-* with a pseudo-class, like has-[:focus], to style an element based on the state of its descendants. You can also use element selectors, like has-[img] or has-[a], to style an element based on the content of its descendants.

Styling based on the descendants of a group

If you need to style an element based on the descendants of a parent element, you can mark the parent with the group class and use the group-has-* variant to style the target element:

<Figure> <Example className="py-0"> { <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300"> <div className="group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4 pt-6">

} </Example>

</Figure>

Styling based on the descendants of a peer

If you need to style an element based on the descendants of a sibling element, you can mark the sibling with the peer class and use the peer-has-* variant to style the target element:

<Figure> <Example className="py-0"> { <div className="mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 dark:border-x-gray-800 dark:bg-gray-950/10"> <fieldset className="space-y-3"> <legend className="text-base font-semibold text-gray-900 dark:text-white">Today</legend> <div className="grid grid-cols-[1fr_24px] items-center gap-6"> <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5"> <input type="checkbox" className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600" defaultChecked /> <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300"> Create a to do list </span> </label> <div className="size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500"> <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </div> </div> <div className="grid grid-cols-[1fr_24px] items-center gap-6"> <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5"> <input type="checkbox" className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600" /> <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300"> Check off first item </span> </label> <div className="size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500"> <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </div> </div> <div className="grid grid-cols-[1fr_24px] items-center gap-6"> <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5"> <input type="checkbox" className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600" /> <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300"> Investigate race condition </span> </label> <div className="block size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500"> <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </div> </div> </fieldset> </div> } </Example> </Figure>

:not()

Use the not- variant to style an element when a condition is not true.

It's particularly powerful when combined with other pseudo-class variants, for example combining not-focus: with hover: to only apply hover styles when an element is not focused:

<Figure hint="Try focusing on the button and then hovering over it"> <Example> { <div className="grid place-items-center"> <button type="button" className="rounded-full bg-indigo-600 px-5 py-2 text-sm leading-5 font-semibold text-white hover:not-focus:bg-indigo-700 focus:outline focus:outline-violet-300 active:bg-violet-700" tabIndex="0" > Save changes </button> </div> } </Example> </Figure>

You can also combine the not- variant with media query variants like forced-colors or supports to only style an element when something about the user's environment is not true:

Styling based on parent state

When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* variants like group-hover to style the target element:

<Figure hint="Hover over the card to see both text elements change color"> <Example> { <a href="#" className="group mx-auto block max-w-xs space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500 dark:bg-white/5 dark:ring-white/10" > <div className="flex items-center space-x-3"> <svg className="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 19H6.931A1.922 1.922 0 015 17.087V8h12.069C18.135 8 19 8.857 19 9.913V11" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 7.64L13.042 6c-.36-.616-1.053-1-1.806-1H7.057C5.921 5 5 5.86 5 6.92V11M17 15v4M19 17h-4" /> </svg> <div className="text-sm font-semibold text-gray-900 group-hover:text-white dark:text-white">New project</div> </div> <p className="text-sm text-gray-500 group-hover:text-white dark:text-gray-400"> Create a new project from a variety of starting templates. </p> </a> } </Example> </Figure>

This pattern works with every pseudo-class variant, for example group-focus, group-active, or even group-odd.

Differentiating nested groups

When nesting groups, you can style something based on the state of a specific parent group by giving that parent a unique group name using a group/{name} class, and including that name in variants using classes like group-hover/{name}:

<Figure> <Example className="py-0"> { <div className="px-4"> <ul role="list" className="mx-auto max-w-md border-x border-x-gray-200 p-2 dark:border-x-gray-800 dark:bg-gray-950/10" > <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"> <div className="flex gap-4"> <div className="flex-shrink-0">

} </Example>

</Figure>

Groups can be named however you like and don’t need to be configured in any way — just name your groups directly in your markup and Tailwind will automatically generate the necessary CSS.

Arbitrary groups

You can create one-off group-* variants on the fly by providing your own selector as an arbitrary value between square brackets:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:group-[.is-published]:block] --> <div class="group is-published"> <div class="hidden group-[.is-published]:block"> Published </div> </div> } /> <CodeBlock example={css .group-\[\.is-published\]\:block { &:is(:where(.group):is(.is-published) *) { display: block; } } } /> </CodeExampleGroup>

For more control, you can use the & character to mark where .group should end up in the final selector relative to the selector you are passing in:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:_&] --> <div class="group"> <div class="group-[:nth-of-type(3)_&]:block"> <!-- ... --> </div> </div> } /> <CodeBlock example={css .group-\[\:nth-of-type\(3\)_\&\]\:block { &:is(:nth-of-type(3) :where(.group) *) { display: block; } } } /> </CodeExampleGroup>

Implicit groups

The in-* variant works similarly to group except you don't need to add group to the parent element:

The in-* variant responds to state changes in any parent, so if you want more fine-grained control you'll need to use group instead.

Styling based on sibling state

When you need to style an element based on the state of a sibling element, mark the sibling with the peer class, and use peer-* variants like peer-invalid to style the target element:

<Figure hint="Try making the email address valid to see the warning disappear"> <Example className="py-0"> { <div className="mx-auto max-w-md border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10"> <form> <div> <label htmlFor="email-2" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> Email </label> <div className="mt-1"> <input type="email" name="email" id="email-2" className="peer block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm" defaultValue="george@krugerindustrial." placeholder="[email protected]" /> <p className="invisible mt-2 text-sm text-pink-600 peer-invalid:visible"> Please provide a valid email address. </p> </div> </div> </form> </div> } </Example> </Figure>

This makes it possible to do all sorts of neat tricks, like floating labels for example without any JS.

This pattern works with every pseudo-class variant, for example peer-focus, peer-required, and peer-disabled.

It's important to note that the peer marker can only be used on previous siblings because of how the subsequent-sibling combinator works in CSS:

<TipBad>{<>Won't work, only previous siblings can be marked as peers</>}</TipBad>

Differentiating peers

When using multiple peers, you can style something on the state of a specific peer by giving that peer a unique name using a peer/{name} class, and including that name in variants using classes like peer-checked/{name}:

<Figure> <Example className="py-0"> { <div className="px-4"> <fieldset className="mx-auto max-w-md border-x border-x-gray-200 p-8 text-sm text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-100"> <div className="mb-6 border-b border-gray-200 pb-2 text-base font-semibold dark:border-gray-800"> Published status </div> <input id="draft" className="peer/draft form-radio mr-2 mb-0.5 border-gray-300 text-sky-400 focus:ring-sky-400" type="radio" name="status" defaultChecked /> <label className="font-medium peer-checked/draft:text-sky-500" htmlFor="draft"> Draft </label> <input id="published" className="peer/published form-radio mr-2 mb-0.5 ml-4 border-gray-300 text-sky-400 focus:ring-sky-400" type="radio" name="status" /> <label className="font-medium peer-checked/published:text-sky-500" htmlFor="published"> Published </label> <div className="mt-4 hidden text-gray-500 peer-checked/draft:block dark:text-gray-400"> Drafts are only visible to administrators. </div> <div className="mt-4 hidden text-gray-500 peer-checked/published:block dark:text-gray-400"> Your post will be publicly visible on your site. </div> </fieldset> </div> } </Example> </Figure>

Peers can be named however you like and don’t need to be configured in any way — just name your peers directly in your markup and Tailwind will automatically generate the necessary CSS.

Arbitrary peers

You can create one-off peer-* variants on the fly by providing your own selector as an arbitrary value between square brackets:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:peer-[.is-dirty]] --> <form> <label for="email">Email:</label> <input id="email" name="email" type="email" class="is-dirty peer" required /> <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div> <!-- ... --> </form> } /> <CodeBlock example={css .peer-\[\.is-dirty\]\:peer-required\:block { &:is(:where(.peer):is(.is-dirty) ~ *) { &:is(:where(.peer):required ~ *) { display: block; } } } } /> </CodeExampleGroup>

For more control, you can use the & character to mark where .peer should end up in the final selector relative to the selector you are passing in:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock filename="HTML" example={html <!-- [!code classes:peer-[:nth-of-type(3)_&]:block] --> <div> <input type="text" class="peer" /> <div class="hidden peer-[:nth-of-type(3)_&]:block"> <!-- ... --> </div> </div> } /> <CodeBlock filename="Generated CSS" example={css .peer-\[\:nth-of-type\(3\)_\&\]\:block { &:is(:nth-of-type(3) :where(.peer) ~ *) { display: block; } } } /> </CodeExampleGroup>

Pseudo-elements

::before and ::after

Style the ::before and ::after pseudo-elements using the before and after variants:

<Figure> <Example className="py-0"> { <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10"> <form> <label className="block"> <span className="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"> Email </span> <input type="email" name="email" id="email-3" className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm" placeholder="[email protected]" /> </label> </form> </div> } </Example> </Figure>

When using these variants, Tailwind will automatically add content: '' by default so you don't have to specify it unless you want a different value:

<Figure> <Example className="py-0"> { <div className="px-6"> <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10"> <blockquote className="text-center text-2xl font-semibold text-gray-900 italic dark:text-white"> When you look{" "} <span className="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500"> <span className="relative text-white dark:text-gray-950">annoyed</span> </span>{" "} all the time, people think that you're busy. </blockquote> </div> </div> } </Example> </Figure>

It's worth noting that you don't really need ::before and ::after pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element.

For example, here's the same design from above but using a <span> instead of the ::before pseudo-element, which is a little easier to read and is actually less code:

Save before and after for situations where it's important that the content of the pseudo-element is not actually in the DOM and can't be selected by the user.

::placeholder

Style the placeholder text of any input or textarea using the placeholder variant:

<Figure> <Example> { <div className="mx-auto max-w-sm"> <form> <label className="relative block"> <span className="absolute inset-y-0 left-0 flex items-center pl-2"> <svg className="h-5 w-5 fill-gray-300" viewBox="0 0 20 20"> <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" /> </svg> </span> <span className="sr-only">Search</span> <input type="text" name="search" className="block w-full rounded-md border border-gray-300 py-2 pr-3 pl-9 text-gray-700 shadow-sm placeholder:text-gray-400 placeholder:italic focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm dark:border-gray-600 dark:text-white" placeholder="Search for anything..." /> </label> </form> </div> } </Example> </Figure>

::file

Style the button in file inputs using the file variant:

<Figure> <Example className="py-0"> { <div className="px-6"> <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10"> <form className="flex items-center space-x-6"> <div className="shrink-0">

} </Example>

</Figure>

::marker

Style the counters or bullets in lists using the marker variant:

<Figure> <Example className="py-0"> { <div className="px-6"> <div className="mx-auto max-w-sm border-x border-x-gray-200 px-8 py-8 dark:border-x-gray-800 dark:bg-gray-950/10"> <h2 className="text-base font-semibold text-gray-900 dark:text-gray-200">Ingredients</h2> <ul role="list" className="mt-3 list-disc space-y-3 pl-5 text-gray-500 marker:text-sky-400 dark:text-gray-400"> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li> </ul> </div> </div> } </Example> </Figure>

We've designed the marker variant to be inheritable, so although you can use it directly on an <li> element, you can also use it on a parent to avoid repeating yourself.

::selection

Style the active text selection using the selection variant:

<Figure hint="Try selecting some of this text with your mouse"> <Example className="py-0"> { <div className="px-6"> <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 text-gray-700 selection:bg-fuchsia-300 selection:text-fuchsia-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300"> <p> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> } </Example> </Figure>

We've designed the selection variant to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements.

This makes it easy to set the selection color to match your brand across your entire site:

::first-line and ::first-letter

Style the first line in a block of content using the first-line variant, and the first letter using the first-letter variant:

<Figure> <Example className="py-0"> { <div className="px-6"> <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 font-serif text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200"> <p className="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:leading-none first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase dark:first-letter:text-white" children={`Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.`} /> <p className="mt-6" children={`Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.`} /> </div> </div> } </Example> </Figure>

::backdrop

Style the backdrop of a native <dialog> element using the backdrop variant:

If you're using native <dialog> elements in your project, you may also want to read about styling open/closed states using the open variant.

Media and feature queries

Responsive breakpoints

To style an element at a specific breakpoint, use responsive variants like md and lg.

For example, this will render a 3-column grid on mobile, a 4-column grid on medium-width screens, and a 6-column grid on large-width screens:

To style an element based on the width of a parent element instead of the viewport, use variants like @md and @lg:

Check out the Responsive design documentation for an in-depth look at how these features work.

prefers-color-scheme

The prefers-color-scheme media query tells you whether the user prefers a light theme or dark theme, and is usually configured at the operating system level.

Use utilities with no variant to target light mode, and use the dark variant to provide overrides for dark mode:

<Figure> <Example padding={false} className="py-0"> { <div className="grid grid-cols-1 sm:grid-cols-2"> <div className="p-8 pt-7"> <p className="mb-2 text-sm font-medium text-gray-500">Light mode</p> <div className="rounded-lg bg-white px-6 py-8 shadow-xl ring-1 ring-gray-900/5"> <div> <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> </svg> </span> </div> <div className="mt-5 text-base font-medium tracking-tight text-gray-900">Writes upside-down</div> <p className="mt-2 text-sm text-gray-500"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p> </div> </div> <div className="border-l border-l-transparent bg-black/90 p-8 pt-7 dark:border-l-white/10 dark:bg-transparent"> <p className="mb-2 text-sm font-medium text-gray-400">Dark mode</p> <div className="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring-1 ring-gray-900/5"> <div> <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> </svg> </span> </div> <div className="mt-5 text-base font-medium tracking-tight text-white">Writes upside-down</div> <p className="mt-2 text-sm text-gray-400"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p> </div> </div> </div> } </Example> </Figure>

Check out the Dark Mode documentation for an in-depth look at how this feature works.

prefers-reduced-motion

The prefers-reduced-motion media query tells you if the user has requested that you minimize non-essential motion.

Use the motion-reduce variant to conditionally add styles when the user has requested reduced motion:

<Figure hint="Try emulating &#96;prefers-reduced-motion: reduce&#96; in your developer tools to hide the spinner"> <Example> { <div className="flex items-center justify-center"> <button type="button" className="inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white shadow" disabled > <svg className="mr-3 -ml-1 h-5 w-5 animate-spin text-white motion-reduce:hidden" fill="none" viewBox="0 0 24 24" > <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" ></path> </svg> Processing... </button> </div> } </Example> </Figure>

Tailwind also includes a motion-safe variant that only adds styles when the user has not requested reduced motion. This can be useful when using the motion-reduce helper would mean having to "undo" a lot of styles:

prefers-contrast

The prefers-contrast media query tells you if the user has requested more or less contrast.

Use the contrast-more variant to conditionally add styles when the user has requested more contrast:

<Figure hint="Try emulating &#96;prefers-contrast: more&#96; in your developer tools to see the changes"> <Example className="py-0"> { <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-4 dark:border-x-gray-800 dark:bg-gray-950/10"> <form> <div> <label htmlFor="contrast-example" className="block text-sm font-medium text-gray-700 dark:text-white"> Social Security Number </label> <div className="mt-1"> <input type="text" name="contrast-example" id="contrast-example" className="block w-full rounded-md border border-gray-200 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 sm:text-sm dark:border-gray-900 dark:contrast-more:border-gray-700 dark:contrast-more:placeholder-gray-300" placeholder="000-00-0000" /> <p className="mt-2 text-sm text-gray-600 opacity-10 contrast-more:opacity-100 dark:text-gray-400"> We need this to steal your identity. </p> </div> </div> </form> </div> } </Example> </Figure>

Tailwind also includes a contrast-less variant you can use to conditionally add styles when the user has requested less contrast.

forced-colors

The forced-colors media query indicates if the user is using a forced colors mode. These modes override your site's colors with a user defined palette for text, backgrounds, links and buttons.

Use the forced-colors variant to conditionally add styles when the user has enabled a forced color mode:

<Figure hint="Try emulating &#96;forced-colors: active&#96; in your developer tools to see the changes"> <Example className="py-0"> { <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-4 text-gray-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-white"> <form> <legend> Choose a theme: </legend> <div className="mt-4 grid grid-flow-col"> <label htmlFor="theme-1" className="text-sm font-medium text-gray-700 dark:text-white"> <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-cyan-500 has-checked:bg-cyan-50 has-checked:text-cyan-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-cyan-950 dark:has-checked:text-cyan-950 forced-colors:border-0"> <input type="radio" name="themes" id="theme-1" className="appearance-none forced-colors:appearance-auto" defaultChecked /> <p className="hidden forced-colors:block">Cyan</p> <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-cyan-200 forced-colors:hidden"></div> <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-cyan-500 ring-2 ring-current forced-colors:hidden"></div> </div> </label> <label htmlFor="theme-2" className="text-sm font-medium text-gray-700 dark:text-white"> <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-blue-500 has-checked:bg-blue-50 has-checked:text-blue-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-blue-950 dark:has-checked:text-blue-950 forced-colors:border-0"> <input type="radio" name="themes" id="theme-2" className="appearance-none forced-colors:appearance-auto" /> <p className="hidden forced-colors:block">Blue</p> <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-blue-200 forced-colors:hidden"></div> <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-blue-500 ring-2 ring-current forced-colors:hidden"></div> </div> </label> <label htmlFor="theme-3" className="text-sm font-medium text-gray-700 dark:text-white"> <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-indigo-500 has-checked:bg-indigo-50 has-checked:text-indigo-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-950 forced-colors:border-0"> <input type="radio" name="themes" id="theme-3" className="appearance-none forced-colors:appearance-auto" /> <p className="hidden forced-colors:block">Indigo</p> <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-indigo-200 forced-colors:hidden"></div> <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-indigo-500 ring-2 ring-current forced-colors:hidden"></div> </div> </label> <label htmlFor="theme-4" className="text-sm font-medium text-gray-700 dark:text-white"> <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-purple-500 has-checked:bg-purple-50 has-checked:text-purple-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-purple-950 dark:has-checked:text-purple-950 forced-colors:border-0"> <input type="radio" name="themes" id="theme-4" className="appearance-none forced-colors:appearance-auto" /> <p className="hidden forced-colors:block">Purple</p> <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-purple-200 forced-colors:hidden"></div> <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-purple-500 ring-2 ring-current forced-colors:hidden"></div> </div> </label> </div> </form> </div> } </Example> </Figure>

Use the not-forced-colors variant to apply styles based when the user is not using a forced colors mode:

Tailwind also includes a forced color adjust utilities to opt in and out of forced colors.

inverted-colors

Use the inverted-colors variant to conditionally add styles when the user has enabled an inverted color scheme:

pointer and any-pointer

The pointer media query tells you whether the user has a primary pointing device, like a mouse, and the accuracy of that pointing device.

Use the pointer-fine variant to target an accurate pointing device, like a mouse or trackpad, or the pointer-coarse variant to target a less accurate pointing device, like a touchscreen, which can be useful for providing larger click targets on touch devices:

<Figure hint="Try emulating a touch device in your developer tools to see the changes"> <Example> { <fieldset aria-label="Choose a memory option" className="mx-auto max-w-md"> <div className="flex items-center justify-between"> <div className="text-sm/6 font-medium text-gray-900 dark:text-white">RAM</div> <a href="#" className="text-sm/6 font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400"> See performance specs </a> </div> <div className="mt-4 grid grid-cols-6 gap-2 max-sm:grid-cols-3 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4"> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="4 GB" className="sr-only" /> <span>4 GB</span> </label> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="8 GB" className="sr-only" defaultChecked /> <span>8 GB</span> </label> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="16 GB" className="sr-only" /> <span>16 GB</span> </label> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="32 GB" className="sr-only" /> <span>32 GB</span> </label> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="64 GB" className="sr-only" /> <span>64 GB</span> </label> <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4"> <input type="radio" name="memory-option" value="128 GB" className="sr-only" /> <span>128 GB</span> </label> </div> </fieldset> } </Example> </Figure>

While pointeronly targets the primary pointing device, any-pointer is used to target any of the pointing devices that might be available. Use the any-pointer-fine and any-pointer-coarse variants to provide different styles if at least one connected pointing device meets the criteria.

You can use pointer-none and any-pointer-none to target the absence of a pointing device.

orientation

Use the portrait and landscape variants to conditionally add styles when the viewport is in a specific orientation:

scripting

Use the noscript variant to conditionally add styles based on whether the user has scripting, such as JavaScript, enabled:

print

Use the print variant to conditionally add styles that only apply when the document is being printed:

@supports

Use the supports-[...] variant to style things based on whether a certain feature is supported in the user's browser:

Under the hood the supports-[...] variant generates @supports rules and takes anything you’d use with @supports (...) between the square brackets, like a property/value pair, and even expressions using and and or.

For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:

Use the not-supports-[...] variant to style things based on whether a certain feature is not supported in the user's browser:

You can configure shortcuts for common @supports rules you're using in your project by creating a new variant in the supports-* namespace:

You can then use these custom supports-* variants in your project:

@starting-style

Use the starting variant to set the appearance of an element when it is first rendered in the DOM, or transitions from display: none to visible:

<Figure> <Example className="flex py-0"> { <Iframe className="h-[340px] w-full"> <div className="grid h-full items-center justify-center"> <button popoverTarget="my-popover" className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2" > Check for updates </button> <div popover="auto" id="my-popover" className="relative inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left opacity-0 shadow-xl transition-all [transition-behavior:allow-discrete] duration-500 sm:w-full sm:max-w-96 sm:p-6 dark:bg-gray-800 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0" > <div> <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-600/10"> <svg className="size-5 text-indigo-400 dark:text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" > <path fillRule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clipRule="evenodd" /> </svg> </div> <div className="mt-3 text-center sm:mt-5"> <h3 className="text-base font-semibold text-gray-900 dark:text-white" id="modal-title"> Update available </h3> <div className="mt-2"> <p className="text-sm text-gray-500 dark:text-gray-200"> A new software update is available: <span className="font-semibold">v2.0.4.</span>

} </Example>

</Figure>

Attribute selectors

ARIA states

Use the aria-* variant to conditionally style things based on ARIA attributes.

For example, to apply the bg-sky-700 class when the aria-checked attribute is set to true, use the aria-checked:bg-sky-700 class:

By default we've included variants for the most common boolean ARIA attributes:

{

<table> <thead> <tr> <th>Variant</th> <th>CSS</th> </tr> </thead> <tbody> <tr> <td> <code className="before:content-none after:content-none">aria-busy</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-busy="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-checked</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-checked="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-disabled</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-disabled="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-expanded</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-expanded="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-hidden</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-hidden="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-pressed</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-pressed="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-readonly</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-readonly="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-required</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-required="true"] </code> </td> </tr> <tr> <td> <code className="before:content-none after:content-none">aria-selected</code> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-selected="true"] </code> </td> </tr> </tbody> </table>

}

You can customize which aria-* variants are available by creating a new variant:

If you need to use a one-off aria variant that doesn’t make sense to include in your project, or for more complex ARIA attributes that take specific values, use square brackets to generate a property on the fly using any arbitrary value:

<Figure> <Example padding={false} className="py-0"> { <div className="py-8"> <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-white/10 dark:bg-transparent"> <thead className="bg-gray-50 dark:bg-white/5"> <tr> <th className="group border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200" aria-sort="ascending" > <span className="flex w-full items-center justify-between gap-2"> Invoice # <svg viewBox="0 0 20 20" className="h-5 w-5 fill-gray-500 group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180" > <path fillRule="evenodd" d="M10 5a.75.75 0 01.75.75v6.638l1.96-2.158a.75.75 0 111.08 1.04l-3.25 3.5a.75.75 0 01-1.08 0l-3.25-3.5a.75.75 0 111.08-1.04l1.96 2.158V5.75A.75.75 0 0110 5z" clipRule="evenodd" /> </svg> </span> </th> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200"> Client </th> <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200"> Amount </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> #100 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> Pendant Publishing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> $2,000.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> #101 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> Kruger Industrial Smoothing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> $545.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> #102 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> J. Peterman </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400"> $10,000.25 </td> </tr> </tbody> </table> </div> } </Example>

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

</CodeExampleGroup> </Figure>

ARIA state variants can also target parent and sibling elements using the group-aria-* and peer-aria-* variants:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:group-aria-[sort=ascending]:rotate-0,group-aria-[sort=descending]:rotate-180] --> <table> <thead> <tr> <th aria-sort="ascending" class="group"> Invoice # <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg> </th> <!-- ... --> </tr> </thead> <!-- ... --> </table> } /> <CodeBlock example={css .group-aria-\[sort\=ascending\]\:rotate-0 { &:is(:where(.group)[aria-sort="ascending"] *) { rotate: 0deg; } } .group-aria-\[sort\=descending\]\:rotate-180 { &:is(:where(.group)[aria-sort="descending"] *) { rotate: 180deg; } } }

/>

</CodeExampleGroup>

Data attributes

Use the data-* variant to conditionally apply styles based on data attributes.

To check if a data attribute exists (and not a specific value), you can just specify the attribute name:

If you need to check for a specific value you may use an arbitrary value:

Alternatively, you can configure shortcuts for common data attributes you're using in your project by creating a new variant in the data-* namespace:

You can then use these custom data-* variants in your project:

RTL support

Use the rtl and ltr variants to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

<Figure> <Example> { <div className="mx-auto grid max-w-lg grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2"> <div dir="ltr"> <p className="mb-4 text-sm font-medium">Left-to-right</p> <div className="group flex items-center">

} </Example>

</Figure>

Remember, these variants are only useful if you are building a site that needs to support both left-to-right and right-to-left layouts. If you're building a site that only needs to support a single direction, you don't need these variants — just apply the styles that make sense for your content.

Open/closed state

Use the open variant to conditionally add styles when a <details> or <dialog> element is in an open state:

<Figure hint="Try toggling the disclosure to see the styles change"> <Example> { <div className="mx-auto max-w-lg"> <details className="rounded-lg border border-transparent p-6 open:border-black/10 open:bg-gray-100 dark:open:border-gray-700/50 dark:open:bg-gray-950/50" open > <summary className="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white"> Why do they call it Ovaltine? </summary> <div className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400"> <p>The mug is round. The jar is round. They should call it Roundtine.</p> </div> </details> </div> } </Example> </Figure>

This variant also targets the :popover-open pseudo-class for popovers:

Styling inert elements

The inert variant lets you style elements marked with the inert attribute:

<Figure> <Example padding={false}> { <form className="mx-auto max-w-md space-y-6 border-x border-x-gray-200 p-8 dark:border-x-gray-800"> <legend>Notification preferences</legend> <fieldset name="resale" defaultValue="permit"> <div className="flex items-center gap-x-3"> <input readOnly id="push-everything" name="push-notifications" type="radio" className="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto forced-colors:before:hidden" /> <label htmlFor="push-everything" className="block text-sm/6 font-medium text-gray-900 dark:text-white"> Custom </label> </div> <fieldset className="mt-6 space-y-6 pl-8 inert:opacity-25" inert> <div className="flex gap-3"> <div className="flex h-6 shrink-0 items-center"> <div className="group grid size-4 grid-cols-1"> <input defaultChecked id="comments" name="comments" type="checkbox" aria-describedby="comments-description" className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto" /> <svg fill="none" viewBox="0 0 14 14" className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25" > <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="opacity-0 group-has-checked:opacity-100" /> <path d="M3 7H11" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="opacity-0 group-has-indeterminate:opacity-100" /> </svg> </div> </div> <div className="text-sm/6"> <label htmlFor="comments" className="font-medium text-gray-900 dark:text-white"> Comments </label> <p id="comments-description" className="text-gray-500 dark:text-gray-400"> Get notified when someones posts a comment on a post. </p> </div> </div> <div className="flex gap-3"> <div className="flex h-6 shrink-0 items-center"> <div className="group grid size-4 grid-cols-1"> <input defaultChecked id="comments" name="comments" type="checkbox" aria-describedby="comments-description" className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto" /> <svg fill="none" viewBox="0 0 14 14" className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25" > <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="opacity-0 group-has-checked:opacity-100" /> <path d="M3 7H11" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="opacity-0 group-has-indeterminate:opacity-100" /> </svg> </div> </div> <div className="text-sm/6"> <label htmlFor="comments" className="font-medium text-gray-900 dark:text-white"> Mentions </label> <p id="comments-description" className="text-gray-500 dark:text-gray-400"> Get notified when someones mentions you. </p> </div> </div> </fieldset> <div className="mt-6 flex items-center gap-x-3"> <input readOnly checked id="push-everything" name="push-notifications" type="radio" className="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto forced-colors:before:hidden" /> <label htmlFor="push-everything" className="block text-sm/6 font-medium text-gray-900 dark:text-white"> Everything </label> </div> </fieldset> </form> } </Example> </Figure>

This is useful for adding visual cues that make it clear that sections of content aren't interactive.

Child selectors

Styling direct children

While it's generally preferable to put utility classes directly on child elements, you can use the * variant in situations where you need to style direct children that you don’t have control over:

<Figure> <Example className="py-0"> { <div className="mx-auto max-w-md border-x border-x-gray-200 p-6 dark:border-x-gray-800 dark:bg-gray-950/10"> <h2 className="text-base font-semibold text-gray-900 dark:text-gray-200">Categories</h2> <div className="flex flex-wrap gap-2 pt-4 text-sm text-sky-600 *:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10"> <div>Sales</div> <div>Marketing</div> <div>SEO</div> <div>Analytics</div> <div>Design</div> <div>Strategy</div> <div>Security</div> <div>Growth</div> <div>Mobile</div> <div>UX/UI</div> </div> </div> } </Example> </Figure>

It's important to note that overriding a style with a utility directly on the child itself won't work since children rules are generated after the regular ones and they have the same specificity:

<TipBad>{<>Won't work, children can't override styles given to them by the parent.</>}</TipBad>

Styling all descendants

Like *, the ** variant can be used to style children of an element. The main difference is that ** will apply styles to all descendants, not just the direct children. This is especially useful when you combine it with another variant for narrowing the thing you're selecting:

<Figure> <Example padding={false}> { <div className="px-4"> <ul role="list" className="mx-auto max-w-md border-x border-x-gray-200 p-2 **:data-avatar:size-12 **:data-avatar:rounded-full dark:border-x-gray-800 dark:bg-gray-950/10" > <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"> <div className="flex gap-4"> <div className="flex-shrink-0">

} </Example>

</Figure>

Custom variants

Using arbitrary variants

Just like arbitrary values let you use custom values with your utility classes, arbitrary variants let you write custom selector variants directly in your HTML.

Arbitrary variants are just format strings that represent the selector, wrapped in square brackets. For example, this arbitrary variant changes the cursor to grabbing when the element has the is-dragging class:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={svelte <!-- [!code classes:[&.is-dragging]:cursor-grabbing] --> <ul role="list"> {#each items as item} <li class="[&.is-dragging]:cursor-grabbing">{item}</li> {/each} </ul> }

/>

<CodeBlock example={css .\[\&\.is-dragging\]\:cursor-grabbing { &.is-dragging { cursor: grabbing; } } } /> </CodeExampleGroup>

Arbitrary variants can be stacked with built-in variants or with each other, just like the rest of the variants in Tailwind:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={svelte <!-- [!code classes:[&.is-dragging]:active:cursor-grabbing] --> <ul role="list"> {#each items as item} <li class="[&.is-dragging]:active:cursor-grabbing">{item}</li> {/each} </ul> } /> <CodeBlock example={css .\[\&\.is-dragging\]\:active\:cursor-grabbing { &.is-dragging { &:active { cursor: grabbing; } } } } /> </CodeExampleGroup>

If you need spaces in your selector, you can use an underscore. For example, this arbitrary variant selects all p elements within the element where you've added the class:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:[&_p]:mt-4] --> <div class="[&_p]:mt-4"> <p>Lorem ipsum...</p> <ul> <li> <p>Lorem ipsum...</p> </li> <!-- ... --> </ul> </div> } /> <CodeBlock example={css .\[\&_p\]\:mt-4 { & p { margin-top: calc(var(--spacing) * 4); } } } /> </CodeExampleGroup>

You can also use at-rules like @media or @supports in arbitrary variants:

<CodeExampleGroup filenames={["HTML", "Generated CSS"]}

<CodeBlock example={html <!-- [!code classes:[@supports(display:grid)]:grid] --> <div class="flex [@supports(display:grid)]:grid"> <!-- ... --> </div> } /> <CodeBlock example={css .\[\@supports\(display\:grid\)\]\:grid { @supports (display:grid) { display: grid; } } } /> </CodeExampleGroup>

With at-rule custom variants the & placeholder isn't necessary, just like when nesting with a preprocessor.

Registering a custom variant

If you find yourself using the same arbitrary variant multiple times in your project, it might be worth creating a custom variant using the @custom-variant directive:

Now you can use the theme-midnight:<utility> variant in your HTML:

Learn more about adding custom variants in the adding custom variants documentation.

Appendix

Quick reference

A quick reference table of every single variant included in Tailwind by default.

{

<div className="max-w-screen overflow-scroll"> <table> <thead> <tr> <th>Variant</th> <th>CSS</th> </tr> </thead> <tbody> <tr> <td> <a href="#hover" className="whitespace-nowrap"> hover </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (hover: hover) {"{ "} <span className="text-gray-400">&</span>:hover {" }"} </code> </td> </tr> <tr> <td> <a href="#focus" className="whitespace-nowrap"> focus </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:focus </code> </td> </tr> <tr> <td> <a href="#focus-within" className="whitespace-nowrap"> focus-within </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:focus-within </code> </td> </tr> <tr> <td> <a href="#focus-visible" className="whitespace-nowrap"> focus-visible </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:focus-visible </code> </td> </tr> <tr> <td> <a href="#active" className="whitespace-nowrap"> active </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:active </code> </td> </tr> <tr> <td> <a href="#visited" className="whitespace-nowrap"> visited </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:visited </code> </td> </tr> <tr> <td> <a href="#target" className="whitespace-nowrap"> target </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:target </code> </td> </tr> <tr> <td> <a href="#styling-direct-children" className="whitespace-nowrap"> * </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> :is(<span className="text-gray-400">&</span> {" > *"}) </code> </td> </tr> <tr> <td> <a href="#styling-all-descendants" className="whitespace-nowrap"> ** </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> :is(<span className="text-gray-400">&</span> {" *"}) </code> </td> </tr> <tr> <td> <a href="#has" className="whitespace-nowrap"> has-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:has(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#styling-based-on-parent-state" className="whitespace-nowrap"> group-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:is(:where(.group)<span className="text-gray-400">...</span> *) </code> </td> </tr> <tr> <td> <a href="#styling-based-on-sibling-state" className="whitespace-nowrap"> peer-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:is(:where(.peer)<span className="text-gray-400">...</span> ~ *) </code> </td> </tr> <tr> <td> <a href="#implicit-groups" className="whitespace-nowrap"> in-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> :where(<span className="text-gray-400">...</span>) <span className="text-gray-400">&</span> </code> </td> </tr> <tr> <td> <a href="#not" className="whitespace-nowrap"> not-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:not(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#styling-inert-elements" className="whitespace-nowrap"> inert </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:is([inert], [inert] *) </code> </td> </tr> <tr> <td> <a href="#first" className="whitespace-nowrap"> first </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:first-child </code> </td> </tr> <tr> <td> <a href="#last" className="whitespace-nowrap"> last </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:last-child </code> </td> </tr> <tr> <td> <a href="#only" className="whitespace-nowrap"> only </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:only-child </code> </td> </tr> <tr> <td> <a href="#odd" className="whitespace-nowrap"> odd </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-child(odd) </code> </td> </tr> <tr> <td> <a href="#even" className="whitespace-nowrap"> even </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-child(even) </code> </td> </tr> <tr> <td> <a href="#first-of-type" className="whitespace-nowrap"> first-of-type </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:first-of-type </code> </td> </tr> <tr> <td> <a href="#last-of-type" className="whitespace-nowrap"> last-of-type </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:last-of-type </code> </td> </tr> <tr> <td> <a href="#only-of-type" className="whitespace-nowrap"> only-of-type </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:only-of-type </code> </td> </tr> <tr> <td> <a href="#nth" className="whitespace-nowrap"> nth-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-child(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#nth-last" className="whitespace-nowrap"> nth-last-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-last-child(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#nth-of-type" className="whitespace-nowrap"> nth-of-type-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-of-type(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#nth-last-of-type" className="whitespace-nowrap"> nth-last-of-type-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:nth-last-of-type(<span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#empty" className="whitespace-nowrap"> empty </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:empty </code> </td> </tr> <tr> <td> <a href="#disabled" className="whitespace-nowrap"> disabled </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:disabled </code> </td> </tr> <tr> <td> <a href="#enabled" className="whitespace-nowrap"> enabled </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:enabled </code> </td> </tr> <tr> <td> <a href="#checked" className="whitespace-nowrap"> checked </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:checked </code> </td> </tr> <tr> <td> <a href="#indeterminate" className="whitespace-nowrap"> indeterminate </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:indeterminate </code> </td> </tr> <tr> <td> <a href="#default" className="whitespace-nowrap"> default </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:default </code> </td> </tr> <tr> <td> <a href="#optional" className="whitespace-nowrap"> optional </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:optional </code> </td> </tr> <tr> <td> <a href="#required" className="whitespace-nowrap"> required </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:required </code> </td> </tr> <tr> <td> <a href="#valid" className="whitespace-nowrap"> valid </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:valid </code> </td> </tr> <tr> <td> <a href="#invalid" className="whitespace-nowrap"> invalid </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:invalid </code> </td> </tr> <tr> <td> <a href="#user-valid" className="whitespace-nowrap"> user-valid </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:user-valid </code> </td> </tr> <tr> <td> <a href="#user-invalid" className="whitespace-nowrap"> user-invalid </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:user-invalid </code> </td> </tr> <tr> <td> <a href="#in-range" className="whitespace-nowrap"> in-range </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:in-range </code> </td> </tr> <tr> <td> <a href="#out-of-range" className="whitespace-nowrap"> out-of-range </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:out-of-range </code> </td> </tr> <tr> <td> <a href="#placeholder-shown" className="whitespace-nowrap"> placeholder-shown </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:placeholder-shown </code> </td> </tr> <tr> <td> <a href="#placeholder-shown" className="whitespace-nowrap"> details-content </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:details-content </code> </td> </tr> <tr> <td> <a href="#autofill" className="whitespace-nowrap"> autofill </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:autofill </code> </td> </tr> <tr> <td> <a href="#read-only" className="whitespace-nowrap"> read-only </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:read-only </code> </td> </tr> <tr> <td> <a href="#before-and-after" className="whitespace-nowrap"> before </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::before </code> </td> </tr> <tr> <td> <a href="#before-and-after" className="whitespace-nowrap"> after </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::after </code> </td> </tr> <tr> <td> <a href="#first-line-and-first-letter" className="whitespace-nowrap"> first-letter </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::first-letter </code> </td> </tr> <tr> <td> <a href="#first-line-and-first-letter" className="whitespace-nowrap"> first-line </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::first-line </code> </td> </tr> <tr> <td> <a href="#marker" className="whitespace-nowrap"> marker </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::marker, <span className="text-gray-400">&</span> *::marker </code> </td> </tr> <tr> <td> <a href="#selection" className="whitespace-nowrap"> selection </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::selection </code> </td> </tr> <tr> <td> <a href="#file" className="whitespace-nowrap"> file </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::file-selector-button </code> </td> </tr> <tr> <td> <a href="#backdrop" className="whitespace-nowrap"> backdrop </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::backdrop </code> </td> </tr> <tr> <td> <a href="#placeholder" className="whitespace-nowrap"> placeholder </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>::placeholder </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> sm </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 40rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> md </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 48rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> lg </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 64rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 80rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> 2xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 96rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> min-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (width {">= "} <span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-sm </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 40rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-md </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 48rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-lg </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 64rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 80rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-2xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 96rem)</code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> max-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (width {"< "} <span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @3xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 16rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @2xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 18rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 20rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @sm </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 24rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @md </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 28rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @lg </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 32rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 36rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @2xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 42rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @3xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 48rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @4xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 56rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @5xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 64rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @6xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 72rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @7xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">="} 80rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @min-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {">= "} <span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-3xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 16rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-2xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 18rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-xs </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 20rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-sm </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 24rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-md </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 28rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-lg </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 32rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 36rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-2xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 42rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-3xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 48rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-4xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 56rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-5xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 64rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-6xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 72rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-7xl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"<"} 80rem) </code> </td> </tr> <tr> <td> <a href="#responsive-breakpoints" className="whitespace-nowrap"> @max-[<span className="text-gray-400">...</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @container (width {"< "} <span className="text-gray-400">...</span>) </code> </td> </tr> <tr> <td> <a href="#prefers-color-scheme" className="whitespace-nowrap"> dark </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (prefers-color-scheme: dark) </code> </td> </tr> <tr> <td> <a href="#prefers-reduced-motion" className="whitespace-nowrap"> motion-safe </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (prefers-reduced-motion: no-preference) </code> </td> </tr> <tr> <td> <a href="#prefers-reduced-motion" className="whitespace-nowrap"> motion-reduce </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (prefers-reduced-motion: reduce) </code> </td> </tr> <tr> <td> <a href="#prefers-contrast" className="whitespace-nowrap"> contrast-more </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (prefers-contrast: more) </code> </td> </tr> <tr> <td> <a href="#prefers-contrast" className="whitespace-nowrap"> contrast-less </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (prefers-contrast: less) </code> </td> </tr> <tr> <td> <a href="#forced-colors" className="whitespace-nowrap"> forced-colors </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (forced-colors: active) </code> </td> </tr> <tr> <td> <a href="#inverted-colors" className="whitespace-nowrap"> inverted-colors </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (inverted-colors: inverted) </code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> pointer-fine </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: fine)</code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> pointer-coarse </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: coarse)</code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> pointer-none </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: none)</code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> any-pointer-fine </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: fine)</code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> any-pointer-coarse </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: coarse)</code> </td> </tr> <tr> <td> <a href="#pointer-and-any-pointer" className="whitespace-nowrap"> any-pointer-none </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: none)</code> </td> </tr> <tr> <td> <a href="#orientation" className="whitespace-nowrap"> portrait </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (orientation: portrait) </code> </td> </tr> <tr> <td> <a href="#orientation" className="whitespace-nowrap"> landscape </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @media (orientation: landscape) </code> </td> </tr> <tr> <td> <a href="#scripting" className="whitespace-nowrap"> noscript </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media (scripting: none)</code> </td> </tr> <tr> <td> <a href="#print" className="whitespace-nowrap"> print </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@media print</code> </td> </tr> <tr> <td> <a href="#supports" className="whitespace-nowrap"> supports-[<span className="text-gray-400">&hellip;</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> @supports (<span className="text-gray-400">&hellip;</span>) </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-busy </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-busy="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-checked </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-checked="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-disabled </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-disabled="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-expanded </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-expanded="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-hidden </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-hidden="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-pressed </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-pressed="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-readonly </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-readonly="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-required </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-required="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-selected </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-selected="true"] </code> </td> </tr> <tr> <td> <a href="#aria-states" className="whitespace-nowrap"> aria-[<span className="text-gray-400">&hellip;</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[aria-<span className="text-gray-400">&hellip;</span>] </code> </td> </tr> <tr> <td> <a href="#data-attributes" className="whitespace-nowrap"> data-[<span className="text-gray-400">&hellip;</span>] </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>[data-<span className="text-gray-400">&hellip;</span>] </code> </td> </tr> <tr> <td> <a href="#rtl-support" className="whitespace-nowrap"> rtl </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) </code> </td> </tr> <tr> <td> <a href="#rtl-support" className="whitespace-nowrap"> ltr </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) </code> </td> </tr> <tr> <td> <a href="#openclosed-state" className="whitespace-nowrap"> open </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none"> <span className="text-gray-400">&</span>:is([open], :popover-open, :open) </code> </td> </tr> <tr> <td> <a href="#starting-style" className="whitespace-nowrap"> starting </a> </td> <td> <code className="whitespace-nowrap before:content-none after:content-none">@starting-style</code> </td> </tr> </tbody> </table> </div>

}

Pseudo-class reference

This is a comprehensive list of examples for all the pseudo-class variants included in Tailwind to complement the pseudo-classes documentation at the beginning of this guide.

:hover

Style an element when the user hovers over it with the mouse cursor using the hover variant:

:focus

Style an element when it has focus using the focus variant:

:focus-within

Style an element when it or one of its descendants has focus using the focus-within variant:

:focus-visible

Style an element when it has been focused using the keyboard using the focus-visible variant:

:active

Style an element when it is being pressed using the active variant:

:visited

Style a link when it has already been visited using the visited variant:

:target

Style an element if its ID matches the current URL fragment using the target variant:

:first-child

Style an element if it's the first child using the first variant:

:last-child

Style an element if it's the last child using the last variant:

:only-child

Style an element if it's the only child using the only variant:

:nth-child(odd)

Style an element if it's an oddly numbered child using the odd variant:

:nth-child(even)

Style an element if it's an evenly numbered child using the even variant:

:first-of-type

Style an element if it's the first child of its type using the first-of-type variant:

:last-of-type

Style an element if it's the last child of its type using the last-of-type variant:

:only-of-type

Style an element if it's the only child of its type using the only-of-type variant:

:nth-child()

Style an element at a specific position using the nth variant:

:nth-last-child()

Style an element at a specific position from the end using the nth-last variant:

:nth-of-type()

Style an element at a specific position, of the same type using the nth-of-type variant:

:nth-last-of-type()

Style an element at a specific position from the end, of the same type using the nth-last-of-type variant:

:empty

Style an element if it has no content using the empty variant:

:disabled

Style an input when it's disabled using the disabled variant:

:enabled

Style an input when it's enabled using the enabled variant, most helpful when you only want to apply another style when an element is not disabled:

:checked

Style a checkbox or radio button when it's checked using the checked variant:

:indeterminate

Style a checkbox or radio button in an indeterminate state using the indeterminate variant:

:default

Style an option, checkbox or radio button that was the default value when the page initially loaded using the default variant:

:optional

Style an input when it's optional using the optional variant:

:required

Style an input when it's required using the required variant:

:valid

Style an input when it's valid using the valid variant:

:invalid

Style an input when it's invalid using the invalid variant:

:user-valid

Style an input when it's valid and the user has interacted with it, using the user-valid variant:

:user-invalid

Style an input when it's invalid and the user has interacted with it, using the user-invalid variant:

:in-range

Style an input when its value is within a specified range limit using the in-range variant:

:out-of-range

Style an input when its value is outside of a specified range limit using the out-of-range variant:

:placeholder-shown

Style an input when the placeholder is shown using the placeholder-shown variant:

:details-content

Style the content of a <details> element using the details-content variant:

:autofill

Style an input when it has been autofilled by the browser using the autofill variant:

:read-only

Style an input when it is read-only using the read-only variant: