Tailwind: Add custom variant
12 February 2026 (Updated 12 February 2026)
In addition to the default Tailwind variants like hover: or focus:, you can also define your own variants. Here’s an example variant named theme-midnight:
Definition:
@custom-variant theme-midnight {
&:where([data-theme="midnight"] *) {
@slot;
}
}Usage:
<html data-theme="midnight">
<button class="theme-midnight:bg-black ..."></button>
</html>The syntax for declaring a custom variant is this:
@custom-variable <variant-name> {
&:where(<variant-condition>) {
@slot
}
}
Tagged:
Tailwind recipes