Tailwindcss Advanced Components

This gives you the full toolkit for building production-grade Tailwind component systems. You get CVA setup for managing variants, compound variants for complex state combinations, and the cn utility with tailwind-merge to safely compose classes. The patterns here match what you'd find in shadcn/ui: proper TypeScript types with VariantProps, compound component patterns with context, data attribute variants for animations, and the asChild slot pattern for polymorphic components. If you're tired of wrestling with conditional classes or rebuilding the same button variants on every project, this is the reference implementation you actually want.

skills.sh installs: 250
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-components --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Advanced Component Patterns

Component Variants with CVA

Class Variance Authority Integration

npm install class-variance-authority

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/josiahsiegel/claude-plugin-marketplace
Categories: Frontend Development, Git & Pull Requests, Code Review & Quality, Design & UI/UX
First seen: Jun 3, 2026