Agent skill · software engineering · aiskillstore
tailwind-v4-shadcn
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
Why this skill is useful
Adds a complete setup guide and critical rules for integrating Tailwind v4 with shadcn/ui, including executable scripts and configurations that are not widely documented.
What it needs
Requires pnpm installed locally. About 9k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tailwind v4 + shadcn/ui Production Stack Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2026-01-20 Versions: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18 Status: Production Ready ✅ --- Quick Start (Follow This Exact Order) vite.config.ts: components.json (CRITICAL): --- The Four-Step Architecture (MANDATORY) Skipping steps will break your theme. Follow exactly: Step 1: Define CSS Variables at Root Critical: Define at root level (NOT inside @layer base). Use hsl() wrapper. Step 2: Map Variables to Tailwind Utilities Why: Generates utility classes (bg-background, text-primary). Without this, utilities won't exist. Step 3: Apply Base Styles Critical: Reference variables directly. Never double-wrap: hsl(var(--background)). Step 4: Result - Automatic Dark Mode --- Dark Mode Setup 1. Create ThemeProvider (see templates/theme-provider.tsx) 2. Wrap App: 3. Add Theme Toggle: See reference/dark-mode.md for ModeToggle component. --- Critical Rules ✅ Always Do: 1. Wrap colors with hsl() in :root/.dark: --bg: hsl(0 0% 100%); 2. Use @theme inline to map all CSS variables 3. Set "tailwind.config": "" in components.json 4. Delete tailwind.config.ts if exists 5. Use @tailwindcss/vite plugin (NOT PostCSS) ❌ Never Do: 1. Put :root/.dark inside @layer base (causes cascade issues) 2. Use .dark { @theme { } } pattern (v4 doesn't support nested @theme) 3. Double-wrap colors: hsl(var(--background)) 4. Use tailwind.config.ts for theme (v4 ignores it) 5. Use @apply directive (deprecated in v4, see error #7) 6. Use dark: variants for semantic colors (auto-handled) 7. Use @apply with @layer base or @layer components classes (v4 breaking change - use @utility instead) Source 8. Wrap ANY styles in @layer base without understanding CSS layer ordering (see error #8) Source --- Common Errors & Solutions This skill prevents 8 documented errors. 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/tailwind-v4-shadcn