What is a Tailwind variant prefix?

A variant is a prefix added before a utility with a colon, like hover:bg-blue-500. It tells Tailwind to apply the utility only under a condition — a pseudo-class, media query or attribute selector. The base utility is unchanged.

Does the order of stacked variants matter?

Stacking order affects readability but Tailwind applies them as a combined condition. By convention you write them outer-to-inner: responsive, then theme like dark, then state like hover. dark:md:hover: and md:dark:hover: produce equivalent selectors.

What does the dark variant compile to?

By default dark: wraps the rule in a media query: @media (prefers-color-scheme: dark). If you configure darkMode to class or selector, it instead prefixes with .dark so you toggle it manually with a class on a parent element.

How do group and peer variants work?

group-hover: styles a child when an ancestor marked with the group class is hovered, compiling to .group:hover .child. peer-checked: styles a sibling after an element marked peer, compiling to .peer:checked ~ .sibling. They enable parent-and-sibling-driven styling without JavaScript.

Are arbitrary variants supported?

Yes. With square brackets you can write any selector, such as [&:nth-child(3)]:underline or supports-[display:grid]:grid. Tailwind injects the selector verbatim where & is the element, enabling one-off conditions without editing config.

Tailwind Utility Prefix Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What Tailwind variant prefixes do

Tailwind utility classes are unconditional by default — bg-blue-500 always applies. Variant prefixes make a utility conditional: hover:bg-blue-500 only paints on hover, md:bg-blue-500 only above the medium breakpoint, and dark:bg-blue-500 only in dark mode. This reference lists the common variants, the CSS selector or at-rule each compiles to, and how to stack them.

How it works

A variant is just a prefix plus a colon. At build time Tailwind’s JIT engine reads the class name, looks up the variant, and wraps the utility’s declaration in the matching selector or media query:

/* hover:bg-blue-500 */
.hover\:bg-blue-500:hover { background-color: #3b82f6 }

/* md:flex */
@media (min-width: 768px) { .md\:flex { display: flex } }

/* dark:text-white (media strategy) */
@media (prefers-color-scheme: dark) { .dark\:text-white { color: #fff } }

Stacked variants combine their conditions. md:dark:hover:underline only underlines when the viewport is >= 768px, the theme is dark, and the element is hovered — all three must hold.

Tips and notes

Write variants outer-to-inner for readability: responsive, then theme, then state, e.g. lg:dark:hover:.
group-* needs a group class on an ancestor; peer-* needs a peer class on an earlier sibling.
Attribute variants like aria-expanded: and data-[state=open]: target real DOM attributes, keeping JS-driven state in sync with styling.
Use arbitrary variants [&_selector]: for one-off cases instead of bloating your config.