tailwind-theme-builder

Tailwind Theme Builder guides you through establishing a fully themed Tailwind v4 project with shadcn/ui components and dark mode support. It implements a required four-step architecture using CSS variables, @theme inline mapping, and a theme provider to enable seamless light/dark switching without component rewrites.

Tailwind Theme Builder sets up Tailwind v4 with shadcn/ui theming and dark mode via CSS variables.

AI-generated summary based on this skill's SKILL.md

★ 943 ⁮ 95 MIT updated 2026-07-02 by jezweb

Install

jezweb/claude-skills/tailwind-theme-builder · repository language: Python

Manual (git clone) CLI (skillfed)

git clone https://github.com/jezweb/claude-skills
cp -r claude-skills/plugins/frontend/skills/tailwind-theme-builder ~/.claude/skills/tailwind-theme-builder

npx skillfed install jezweb/claude-skills/tailwind-theme-builder

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I set up tailwind v4 theme with dark mode support?

Tailwind Theme Builder guides you through a four-step architecture: (1) define CSS variables in your root stylesheet using HSL format, (2) map those variables to Tailwind's @theme inline directive, (3) configure a theme provider component for light/dark switching, and (4) apply semantic color tokens to shadcn/ui components. This approach enables dark mode without rewriting individual components.

What's the proper way to configure tailwind css variables?

Tailwind Theme Builder recommends storing color definitions as CSS variables in your root stylesheet—typically using HSL values for better dark mode control. Then use @theme inline in your Tailwind config to map those variables directly to color tokens. This separation keeps your theme centralized and makes dark mode toggling straightforward by switching CSS variable values at the document root.

How do I migrate from Tailwind v3 to v4 with proper theme architecture?

Tailwind Theme Builder supports v3-to-v4 migration by helping you refactor your theme structure to use CSS variables and @theme inline instead of the older config-only approach. The tool guides you through updating color definitions, fixing @apply and animation imports that may break during upgrade, and establishing a theme provider for React apps to manage light/dark state consistently.

Why is my tailwind dark mode not working after setup?

Tailwind Theme Builder helps debug color configuration issues by verifying that CSS variables are properly defined in your root stylesheet, @theme inline is correctly mapped in your Tailwind config, and your theme provider is toggling the dark class on the document root. Common causes include missing variable fallbacks, incorrect HSL syntax, or the theme provider not actually updating the DOM class when switching modes.

How do I set up shadcn/ui components with Tailwind v4 theming?

Tailwind Theme Builder integrates shadcn/ui by ensuring your semantic color tokens (primary, secondary, destructive, etc.) are defined as CSS variables and mapped through @theme inline. Your theme provider then controls light/dark switching globally, and shadcn components automatically use the correct colors via their Tailwind class references without requiring per-component dark mode logic.

What should I do if tailwind @apply or animations break after upgrading?

Tailwind Theme Builder troubleshoots @apply and animation import errors by checking your Tailwind v4 configuration for proper directive syntax and ensuring animation definitions are correctly imported. The tool helps verify that @theme inline doesn't conflict with @apply rules, and guides you through updating animation imports to match v4's module structure.

SKILL.md

rendered from the published skill — quoted content, verbatim