tailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
npx skills add jezweb/claude-skills --skill tailwind-theme-builder --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Tailwind Theme Builder Set up a fully themed Tailwind v4 + shadcn/ui project with dark mode. Produces configured CSS, theme provider, and working component library. ## Architecture: The Four-Step Pattern Tailwind v4 requires a specific architecture for CSS variable-based theming. This pattern is **mandatory** -- skipping or modifying steps breaks the theme. ### How It Works ``` CSS Variable Definition --> @theme inline Mapping --> Tailwind Utility Class --background --> --color-background --> bg-background (with hsl() wrapper) (references variable) (generated class) ``` Dark mode switching: ``` ThemeProvider toggles .dark class on <html> --> CSS variables update automatically (.dark overrides :root) --> Tailwind utilities reference updated variables --> UI updates without re-render ``` ### Best Practices - **Semantic names:** Use `--primary` not `--blue-500` - **Foreground pairing:** Every background colour needs a foreground (`--primary` + `--primary-foreground`) - **WCAG contrast:** Normal text 4.5:1, large text 3:1, UI components 3:1 - **Chart colours:** Use separate variables with `@theme inline` mapping, reference via `var(--chart-1)` in style props --- ## Workflow ### Step
- Architecture: The Four-Step Pattern
- How It Works
- Best Practices
- Workflow
- Step 1: Install Dependencies
- Step 2: Configure Vite
- Step 3: Four-Step CSS Architecture (Mandatory)
- Step 4: Set Up Dark Mode
- Step 5: Configure components.json
- Critical Rules
- All 18 Gotchas
- Quick Diagnosis
- Gotcha Details with Code Examples
- Prevention Checklist
pnpm add tailwindcss @tailwindcss/vite pnpm add -D @types/node tw-animate-css pnpm dlx shadcn@latest init Delete v3 config if it exists rm -f tailwind.config.ts pnpm dlx shadcn@latest add dropdown-menu
What does the tailwind-theme-builder skill do?
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill tailwind-theme-builder --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.