Tailwind Theme Builder

This handles the full Tailwind v4 migration dance: CSS variable setup, dark mode wiring, and shadcn/ui integration without the usual footguns. The four-step CSS architecture is mandatory and well-documented here because v4 breaks if you nest things wrong or double-wrap hsl() values. What's useful is the troubleshooting table covering all 18 gotchas, from variables being ignored when :root sits inside @layer base to the PostCSS versus Vite plugin confusion. Reach for this when you're migrating from v3, setting up a new themed project, or debugging why bg-background isn't generating. It's opinionated about semantic tokens and includes the complete theme provider and toggle components.

skills.sh installs: 3.3K
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill tailwind-theme-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

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