tailwind-v4-shadcn
tailwind v4 shadcn
What it does
- ❌ Setup time: ~5 minutes
- ❌ Errors encountered: 2-3 (tw-animate-css, duplicate @layer base)
- ❌ Manual fixes needed: 2+ commits
- ❌ Token usage: ~65k
- ❌ User confidence: Required debugging
- ✅ Setup time: ~1 minute
- ✅ Errors encountered: 0
Requirements & configuration
- ❌ Token usage: ~65k
- ✅ Token usage: ~20k (70% reduction)
- 5. Wrong plugin syntax (using @import or require() instead of @plugin directive)
- Load reference files based on user's specific needs:
- Need ThemeProvider component code
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
tailwind-v4-shadcn FAQ
What does the tailwind-v4-shadcn skill do?
| 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. ❌ Setup time: ~5 minutes ❌ Errors encountered: 2-3 (tw-animate-css, duplicate @layer base)
What does tailwind-v4-shadcn require?
❌ Token usage: ~65k ✅ Token usage: ~20k (70% reduction) 5. Wrong plugin syntax (using @import or require() instead of @plugin directive) Load reference files based on user's specific needs: Need ThemeProvider component code
How do I install tailwind-v4-shadcn?
Run: npx -y skills add https://github.com/secondsky/claude-skills --skill tailwind-v4-shadcn --agent claude-code — the source lives at github.com/secondsky/claude-skills.
Maintain tailwind-v4-shadcn?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/secondsky-claude-skills-tailwind-v4-shadcn?ref=badge) npx agentictools info skills/secondsky-claude-skills-tailwind-v4-shadcn The second line is the CLI lookup for this page — handy in READMEs and docs.
