메뉴
Tailwind v4 + shadcn/ui setup (@theme inline + CSS variables). Fixes tw-animate-css, @apply, dark mode.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.