Skills
.Work. You
Rest

tailwind-variants

Community

Define reusable component variants with Tailwind.

Design & Creative#typescript#ui#react#css#design-system#variants#tailwind-variants
Authoroversio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Tailwind-variants provides a structured approach to manage complex Tailwind CSS class variants, enabling consistent design systems and reusable components across a project.

Core Features & Use Cases

  • Variant definitions with tv() to model color, size, state, and more.
  • Slots pattern support for multi-part components (base, header, body, footer).
  • Compound variants and defaulting for predictable UI outcomes.
  • TypeScript integration for typed variant props and strong editor support.
  • Ideal for design-system driven frontend work in React and other frameworks.

Quick Start

Install the package with npm or yarn, then start defining variant sets in a .variants.ts file and use the generated variant hooks/classes in your components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tailwind-variants
Download link: https://github.com/oversio/personal-finances/archive/main.zip#tailwind-variants

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.