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. 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
88
85%
Does it follow best practices?
Impact
92%
1.55xAverage score across 3 eval scenarios
Passed
No known issues
CSS variable architecture and @theme inline mapping
hsl() in :root
0%
100%
hsl() in .dark
0%
100%
:root at root level
100%
100%
.dark at root level
100%
100%
@theme inline present
0%
100%
@theme inline mapping
0%
100%
No double-wrap in @layer base
0%
100%
No nested @theme in .dark
100%
100%
@import tailwindcss present
100%
100%
Semantic color coverage
50%
100%
Tailwind v4 Vite project setup and configuration files
@tailwindcss/vite import
100%
100%
vite plugins array
100%
100%
components.json config empty
100%
100%
No tailwind.config.ts
100%
100%
tsconfig path aliases
100%
100%
vite alias config
100%
100%
pnpm for shadcn init
0%
100%
No deprecated animation package
100%
100%
@types/node dev dep
100%
100%
tailwindcss + @tailwindcss/vite deps
100%
100%
Post-init cleanup note
0%
62%
Tailwind v4 plugin syntax and semantic color tokens
@plugin for typography
100%
100%
No @import for plugin
100%
100%
Semantic destructive token
0%
100%
Semantic success token
0%
0%
Semantic warning token
0%
100%
No dark: on semantic colors
100%
100%
cn() for conditional classes
0%
0%
No @apply directive
100%
100%
Semantic color in @theme
50%
100%
prose class usage
100%
100%
40506e5
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.