Stacking Variants
Combine responsive, dark and state prefixes on one utility.
Syntax
class="dark:md:hover:bg-cyan-600"You can chain prefixes. They read left to right as conditions, ending in the utility that applies when all conditions are met.
For example md:hover:bg-cyan-600 means: on medium screens and up, when hovered, use a cyan-600 background.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer writes dark:md:text-white to show white text only on medium screens in dark mode, combining two prefixes on one utility.
- A button's hover color is overridden per breakpoint with sm:hover:bg-blue-500 md:hover:bg-blue-700 for breakpoint-specific interaction styles.
- An element that is both in dark mode and focused gets a different ring color via dark:focus:ring-indigo-400, stacking three variants.
More examples
Dark and responsive stack
dark:md:text-lg combines the dark mode and md breakpoint variants so the text only enlarges on medium screens when in dark mode.
<div class="bg-white text-gray-900
dark:bg-gray-800 dark:text-gray-100
md:p-8 p-4">
<p class="text-sm md:text-base dark:md:text-lg">
Content adapts to both dark mode and breakpoint.
</p>
</div>Responsive hover color
Stacking a breakpoint prefix before hover: changes the hover color at each viewport size, demonstrating how multiple prefixes compose.
<button
class="bg-gray-100 px-4 py-2 rounded
hover:bg-gray-200
md:hover:bg-indigo-100
lg:hover:bg-indigo-200"
>
Hover me
</button>Triple variant stack
dark:focus:ring-indigo-400 applies a different ring color in dark mode on focus; md:dark:focus:ring-offset-2 adds an offset only at the md breakpoint in dark mode.
<input
type="text"
class="border rounded px-3 py-2
focus:ring-2 focus:ring-blue-500
dark:focus:ring-indigo-400
md:dark:focus:ring-offset-2"
/>
Discussion