Tailwind Variantsby HeroUI
A first-class variant API
for Tailwind CSS.
Fully typed for TypeScript, with trusted class merging across any framework.
$ npm install tailwind-variants
Working
LiveFeatures
Variants by default.
Composable by design.
A small API with full control over variants, slots, and compound styles.
button.styles.ts
Core Concepts
Minimal by default.
Powerful when you need it.
Building blocks for a typed API that scales with your design system.
Variants
Map variants like color and size once, then reuse them on every instance.
button.styles.ts
Docs
Open the variants guide.
Learn the API with typed recipes, slots, and compound styles — then copy the patterns into your design system.