Tailwind V4 Shadcn
Bootstrap React + Vite apps with Tailwind CSS v4 and shadcn/ui using the @theme inline CSS-variable pattern without the usual color and dark-mode pitfalls.
Overview
Tailwind v4 + shadcn/ui is an agent skill for the Build phase that sets up the @theme inline CSS-variable architecture for React projects and fixes common v4 color and dark-mode failures.
Install
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-v4-shadcnWhat is this skill?
- Four-step setup pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode
- Documents and prevents 8 common Tailwind v4 + shadcn/ui integration errors
- Auto-trigger coverage for tw-animate-css failures, @apply breakage, and bg-primary not applying
- Production-tested stack path (Vite, React, @tailwindcss/vite, shadcn/ui)
- @theme inline architecture for theme switching without fighting the dark: variant
- Four-step @theme inline setup pattern
- 8 documented integration errors prevented
- Production-tested on WordPress Auditor (Workers deployment)
Adoption & trust: 2.7k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your new React app uses Tailwind v4 and shadcn/ui but theme colors, dark mode, or animations fail with cryptic CSS and import errors.
Who is it for?
Solo builders starting or fixing Vite + React UIs that standardize on shadcn/ui and Tailwind v4’s @theme inline model.
Skip if: Non-React stacks, CSS-framework-free vanilla HTML projects, or teams already on a stable Tailwind v3 pipeline with no migration plan.
When should I use this skill?
Initializing React projects with Tailwind v4, fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, or v3 migration issues.
What do I get? / Deliverables
You get a production-ready Tailwind v4 + shadcn/ui foundation with working design tokens, dark mode, and documented fixes for the eight recurring misconfiguration patterns.
- Tailwind v4 + shadcn-compatible global CSS and @theme inline mapping
- Working light/dark theme and base component styles
- Resolved v4 import and utility configuration
Recommended Skills
Journey fit
Greenfield UI setup and design-system wiring happen in Build when you are implementing the product surface, not when you are only validating an idea. Frontend subphase is where Tailwind tokens, shadcn components, and theme architecture must be correct before feature work piles on broken styles.
How it compares
Opinionated init and troubleshooting skill for v4 + shadcn, not a generic component library catalog or Figma-to-code tool.
Common Questions / FAQ
Who is tailwind-v4-shadcn for?
Indie developers and agent-assisted builders implementing React frontends who want shadcn/ui-compatible theming on Tailwind CSS v4 without trial-and-error config.
When should I use tailwind-v4-shadcn?
During Build when scaffolding a new UI, migrating from Tailwind v3, or when triggers like css variables not working, colors all black/white, or @theme inline conflicts appear.
Is tailwind-v4-shadcn safe to install?
It guides local project file and dependency changes; check the Security Audits panel on this Prism page and review any commands before running them in your repo.
SKILL.md
READMESKILL.md - Tailwind V4 Shadcn
{ "name": "tailwind-v4-shadcn", "description": "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.", "version": "1.0.0", "author": { "name": "Jeremy Dawes", "email": "jeremy@jezweb.net" }, "license": "MIT", "repository": "https://github.com/jezweb/claude-skills", "keywords": [], "commands": "./commands/" } # Tailwind v4 + shadcn/ui Skill **Status**: Production Ready ✅ **Last Updated**: 2026-01-03 **Production Tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) --- ## Auto-Trigger Keywords This skill should be invoked when user mentions ANY of: ### Primary Triggers: - `tailwind v4` - `tailwind css v4` - `shadcn/ui` - `shadcn ui` - `vite + react + tailwind` - `@tailwindcss/vite` ### Secondary Triggers: - `dark mode setup` - `theme provider` - `theme switching` - `@theme inline` - `css variables not working` - `colors not applying` - `tailwind utilities missing` ### Error-Based Triggers: - `tw-animate-css` (common error) - `@apply deprecated` - `dark: variant not working` - `colors all black/white` - `bg-primary doesn't work` - `@import typography` (wrong v4 syntax) - `require @tailwindcss/typography` (v3 syntax in v4) - `prose class not working` - `@plugin directive` --- ## What This Skill Does Sets up **production-ready** Vite + React + Tailwind CSS v4 + shadcn/ui with: ✅ **Correct v4 architecture** - @theme inline pattern, no config file ✅ **Dark mode** - ThemeProvider with system/light/dark support ✅ **Error prevention** - Fixes tw-animate-css, duplicate @layer, @apply deprecation ✅ **Semantic colors** - Full color palette with proper CSS variables ✅ **Path aliases** - @/* imports configured ✅ **TypeScript** - Full type safety ✅ **Templates** - Proven file templates ready to copy --- ## Known Issues This Skill Prevents | Issue | Why It Happens | How Skill Fixes It | |-------|---------------|-------------------| | `tw-animate-css` import error | shadcn init adds non-existent import | Provides clean CSS template | | Duplicate `@layer base` | shadcn init adds second block with @apply | Single clean @layer block | | Colors don't work | Missing `@theme inline` mapping | Complete mapping provided | | Dark mode broken | No ThemeProvider or wrong setup | Full ThemeProvider template | | Wrong config | `tailwind.config.ts` used for theme | Empty config, CSS-only theme | | Double hsl() wrapping | Common pattern mistake | Correct variable usage | | Wrong plugin syntax | Using @import or require() for plugins | Correct @plugin directive documented | --- ## When to Use This Skill ### ✅ Use When: - Starting a new Vite + React project with Tailwind v4 - Adding Tailwind v4 to existing Vite project - Migrating from Tailwind v3 to v4 - Integrating shadcn/ui components - Setting up dark mode with theme switching - Debugging Tailwind v4 color/theme issues - Need production-tested v4 patterns ### ❌ Don't Use When: - Using Tailwind v3 (different architecture) - Using Next.js (different setup, use Next.js skill instead) - Using PostCSS instead of Vite plugin - Building pure CSS library (no React needed) - User specifically requests manual setup for learning --- ## Template Structure ``` ~/.claude/skills/tailwind-v4-shadcn/ ├── README.md # This file - auto-trigger keywords ├── SKILL.md # Complete documentation (623 lines) ├── templates/ # Ready-to-copy file templates │ ├── index.css # v4 CSS architecture │ ├── components.json # shadcn/ui v4 config │ ├── vite.config.ts # Vite + Tailwind plugin │ ├── tsconfig.app.json # TypeScript with aliases │ ├── theme