heroui-inc/tailwind-variants

Health v2 · maintenance only

Adoption not part of the score

3292 stars · 88 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

Tailwind Variants is a TypeScript library providing a first-class variant API on top of Tailwind CSS, letting you define typed component recipes with base styles, variants, slots, compound rules, and defaults. It includes built-in Tailwind class conflict resolution, is framework-agnostic, and offers a lite build for smaller bundles.

Use cases

• manage tailwind css variants for ui components
• build a typed design system with tailwind
• merge conflicting tailwind classes automatically
• style multi-part components with slots
• create compound variant styles in tailwind
• replace cva with a fully typed variant api

When to choose

• you use Tailwind CSS and want Stitches-style variants with full TypeScript inference
• you need slots and compound variants for multi-part components
• you want built-in class conflict resolution without installing tailwind-merge separately
• you need a framework-agnostic styling utility that works with React, Vue, Svelte, or plain JS

When to avoid

• you don't use Tailwind CSS for styling
• you need responsive variant generation with Tailwind v4, which no longer supports config transforms
• you want a full CSS-in-JS solution with runtime style objects rather than class strings
• bundle size is critical and you can't accept even the lite build's overhead

Facets

library · maturity active

ui-components css-framework state-management frontend web-development web-design developer-tools browser cross-platform tailwindcss variants design-systems class-merging typescript component-recipes slots framework-agnostic nodejs web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="heroui-inc/tailwind-variants")