tailwind-theme-builder
Tailwind v4 and shadcn/ui setup with CSS variables, dark mode, and semantic color theming.
- Automates dependency installation, Vite configuration with the Tailwind plugin, and shadcn/ui initialization
- Implements a mandatory four-step CSS architecture: root CSS variables, @theme inline mapping, base styles, and dark mode via class switching
- Includes pre-built theme provider component for dark mode toggling and persistent theme storage
- Provides troubleshooting guides for common v4 migration issues: @apply breaking changes, double hsl() wrapping, missing @theme blocks, and tw-animate-css errors
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>
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Kfastapi
|
2.0Kcolor-palette
>
1.9Ktanstack-start
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. No template repo — Claude generates every file fresh per project.
1.6K