tailwind-variants

First-class variant API for Tailwind CSS with automatic class conflict resolution and slots.

tailwind-variants

General JS

First-class variant API for Tailwind CSS with automatic class conflict resolution and slots.

npm GitHub Docs

Fit

Bundle (gzip)

898 B

5.3 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

CVA gets you variants, but you still bolt on tailwind-merge manually, and multi-part components (a card with header/body/footer "slots") don't have a clean pattern. Composing shared styles across related components stays repetitive.

What It Does

Tailwind Variants extends the variants idea used in shadcn-style components with built-in tailwind-merge conflict resolution, multi-slot components, compound variants, and composition via extend. One definition can style a whole component with several named parts, each getting the right merged classes.

Installation

bash

npm install tailwind-variants

Usage Example

import { tv } from 'tailwind-variants';

const card = tv({
  slots: {
    base: 'rounded-xl border bg-white shadow-sm',
    title: 'text-lg font-semibold',
    body: 'text-sm text-gray-600',
  },
  variants: {
    padded: { true: { base: 'p-6' } },
  },
});

const { base, title, body } = card({ padded: true });

Related packages

ai (Vercel AI SDK)General JS

Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.

animejsGeneral JS

Lightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.

AOSGeneral JS

An easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.

archiverGeneral JS

Streaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.

@formkit/auto-animateGeneral JS

> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.