theme variants
for Tailwind CSS

tailwindcss-theme-variants is a powerful theming plugin for Tailwind CSS:

Extreme browser support

You can easily theme browsers as far back as IE9, especially when you use the fallback feature and are still on Tailwind 1.x.

For every utility

Any utility can have theme variants, thanks to how Tailwind CSS’s variant system works.

Theme text colors, box shadows, opacities—even utilities from other plugins!

Stick to your design system

It’s impossible to deviate from your Tailwind configuration when using this plugin’s variants and semantics.

Unlimited themes

Go beyond just light and dark modes—write any number of themes and any number of theme groups.

They can be controlled by media queries, classes, or attributes.

Write smart classes

The experimental semantics feature glues your design system and theme variants together—creating meaningful classes like “text-primary” that synchronize with your themes.

Stack extra variants

Use variants like theme:hover to change a link’s color on hover depending on the theme.

Use responsive variants to set a border color depending on the breakpoint and theme.

Convinced?