| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/tailwind-v4-shadcn
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
tailwind-v4-shadcn.SKILL.md
---name: tailwind-v4-shadcn
description: "| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns."
metadata:
keywords:
- Tailwind v4
- shadcn/ui
- "@tailwindcss/vite"
- "@theme inline"
- dark mode
- CSS variables
- hsl() wrapper
- components.json
- React theming
- theme switching
- colors not working
- variables broken
- theme not applying
- "@plugin directive"
- typography plugin
- forms plugin
- prose class
- "@tailwindcss/typography"
- "@tailwindcss/forms"
license: MIT
---# Tailwind v4 + shadcn/ui Production Stack
**Production-tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
**Built-in Features:** Container queries are now core (no `@tailwindcss/container-queries` plugin needed).
Load `references/plugins-reference.md` for complete documentation including Typography plugin (prose classes), Forms plugin, installation steps, and common plugin errors.
---
## Reference Documentation
For deeper understanding, see:
- **common-gotchas.md** - All the ways it can break (and fixes)
- **dark-mode.md** - Complete dark mode implementation
- **migration-guide.md** - Migrating hardcoded colors to CSS variables
- **plugins-reference.md** - Official Tailwind v4 plugins (Typography, Forms)
- **advanced-usage.md** - Custom colors and advanced patterns
---
## When to Load References
Load reference files based on user's specific needs:
### Load `references/common-gotchas.md` when:
- User reports "colors not working" or "bg-primary doesn't exist"
- Dark mode not switching properly
- Build fails with Tailwind errors
- User encounters any CSS/configuration issue
- Debugging theme problems
### Load `references/dark-mode.md` when:
- User asks to implement dark mode
- Theme switching not working
- Need ThemeProvider component code
- Questions about system theme detection
### Load `references/migration-guide.md` when:
- Migrating from Tailwind v3 to v4
- User has hardcoded colors to migrate
- Questions about v3 → v4 changes
- Need migration checklist
### Load `references/plugins-reference.md` when:
- User needs Typography plugin (prose class)
- User needs Forms plugin
- Questions about @plugin directive
- Plugin installation errors
### Load `references/advanced-usage.md` when:
- User asks about custom colors beyond defaults
- Need advanced component patterns
- Questions about component best practices
- Component composition questions
---
## Official Documentation
- **shadcn/ui Vite Setup**: https://ui.shadcn.com/docs/installation/vite
When installing Tailwind and shadcn/ui packages, follow supply chain security best practices:
- **Block post-install scripts** — `npm config set ignore-scripts true` (or Bun: disabled by default)
- **Cooldown period** — Wait 7 days for new package versions to be vetted by the community
- **Audit before installing** — Run `socket package score npm <pkg>` or use `socket npm install <pkg>` to check packages
Load the `dependency-upgrade` skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
## Production Example
This skill is based on the WordPress Auditor project:
