Menu
Tailwind v4 + shadcn/ui setup (@theme inline + CSS variables). Fixes tw-animate-css, @apply, dark mode.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Structured brainstorming for exploring new features or solving complex problems
Scope, architect, and plan new tasks
Multi-angle code review before merging
Summarize the day's work and put it in context
Wrap up work — atomic commits and push to origin
Full end-to-end (E2E) testing skill utilizing the browser. Make sure to use this skill whenever the user asks to "test the app", "run end to end tests", "verify the UI", "check if the app works", or wants you to use the browser to interact with and test the application flow. This skill orchestrates creating a test plan, getting user approval, navigating the application using the browser, independently fixing obstacles, and generating a progressive test report.
| name | tailwind-v4-shadcn |
| description | Tailwind v4 + shadcn/ui setup (@theme inline + CSS variables). Fixes tw-animate-css, @apply, dark mode. |
| user-invocable | true |
pnpm add tailwindcss @tailwindcss/vite; pnpm add -D @types/node tw-animate-css; pnpm dlx shadcn@latest init; rm tailwind.config.ts
vite.config.ts: plugins: [react(), tailwindcss()]
components.json: "tailwind": { "config": "", "css": "src/index.css", "baseColor": "slate", "cssVariables": true }
src/index.css:
@import "tailwindcss";
@import "tw-animate-css";
:root { --background: hsl(0 0% 100%); /* ... */ }
.dark { --background: hsl(222.2 84% 4.9%); /* ... */ }
@theme inline { --color-background: var(--background); /* map all */ }
@layer base { body { background-color: var(--background); color: var(--foreground); } } /* NO hsl() wrapper here! */
Dark mode requires ThemeProvider wrapped around App and toggles .dark on <html>.
:root colors in hsl(). Map all via @theme inline. Use @tailwindcss/vite.:root inside @layer base. Use tailwind.config.ts. Double-wrap hsl(var(--bg)). Use @apply with @layer base/components (use @utility). Use dark: variants for semantics.| Error | Fix |
|---|---|
tw-animate-css missing | pnpm add -D tw-animate-css; @import "tw-animate-css" in CSS. Do NOT use tailwindcss-animate. |
| Colors not applying | Map variable in @theme inline { --color-primary: var(--primary); } |
| Dark mode static | Add <ThemeProvider> to main.tsx. |
Dupe @layer base | Ensure only one @layer base exists in CSS. |
| Build fails on config | rm tailwind.config.ts |
| Multi-theme dark mode fails | Don't use @theme inline for multi-theme (data-theme="blue"). Use @theme + @layer theme. |
@apply fails in v4 layer | Change @layer components to @utility custom-class { @apply ... }. |
@layer base ignored | Don't wrap :root in @layer base. Define at document root. |
oklch(0.7 0.15 250) for modern colors. Fallbacks automatically generated.@container, @md:), Line Clamp (line-clamp-3).@plugin "@tailwindcss/typography"; (not @import). Run pnpm add -D @tailwindcss/typography for prose.ring is 1px now (was 3px).@tailwindcss/upgrade often fails. Do manual migration. Default element styles (h1, ul) removed—use Typography plugin or custom base styles. Use Vite plugin, not PostCSS.