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
Decision gist · record as of 2026-07-02
Tailwind Theme Builder sets up Tailwind v4 with shadcn/ui theming and dark mode via CSS variables. 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.
Use it when
- Tailwind Theme Builder recommends storing color definitions as CSS variables in your root stylesheet—typically using HSL values for better.
- Tailwind Theme Builder supports v3-to-v4 migration by helping you refactor your theme structure to use CSS variables and @theme inline.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
jezweb/claude-skills/tailwind-theme-builder · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
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
(truncated - see the full file via the links below)
File tree — 8 files
plugins/frontend/skills/tailwind-theme-builder/SKILL.md
plugins/frontend/skills/tailwind-theme-builder/assets/components.json
plugins/frontend/skills/tailwind-theme-builder/assets/index.css
plugins/frontend/skills/tailwind-theme-builder/assets/theme-provider.tsx
plugins/frontend/skills/tailwind-theme-builder/assets/tsconfig.app.json
plugins/frontend/skills/tailwind-theme-builder/assets/utils.ts
plugins/frontend/skills/tailwind-theme-builder/assets/vite.config.ts
plugins/frontend/skills/tailwind-theme-builder/references/migration-guide.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up Tailwind v4 with shadcn/ui dark mode and CSS variable theming”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through initializing Shadcn UI and Tailwind CSS v4 specifically for Vite projects. It handles TypeScript path configuration, Vite plugin setup, component installation, and dependency verification to ensure everything works together.
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
Get a battle-tested foundation for React projects using Tailwind v4 and shadcn/ui, complete with dark mode, semantic color tokens, and Vite integration. This skill covers the four-step CSS architecture, theme switching, and solutions to common v4 migration issues—all designed to eliminate setup errors and cut configuration time dramatically.
Resolve Tailwind CSS styling problems with structured troubleshooting for classes that won't apply, dynamic class generation failures, and version migration conflicts. Get decision trees, configuration templates, and debugging steps for content detection, IntelliSense setup, and build cache issues.
Shadcn Setup configures shadcn/ui components with modern Tailwind v4 CSS-first setup, installing dependencies and generating the required globals.css, components.json, and utility files. It handles theme selection, component installation, and ensures proper v4 configuration without deprecated patterns.
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
More skills Ui Design System (unlicensed) · Tailwind (unlicensed) · Shadcn Ui (unlicensed) · Frontend Ui Skill (unlicensed)