tailwind-theme-builder

The tailwind-theme-builder skill configures a fully themed Tailwind CSS v4 and shadcn/ui project with dark mode support using the required CSS variable architecture for Tailwind v4. It solves common migration and configuration problems that occur when upgrading from Tailwind v3, integrating semantic theme tokens, or troubleshooting issues such as broken `@apply` usage, missing semantic utility classes, `tw-animate-css` errors, and conflicts with `@theme inline`. The skill establishes the mandatory four-step theming pattern required for Tailwind v4, ensuring semantic utility classes like `bg-background` and `text-primary` function correctly while supporting automatic dark mode updates through CSS variables.

The skill installs and configures the required dependencies for Tailwind v4, Vite integration, and shadcn/ui setup. It defines semantic CSS variables for both light and dark themes, maps those variables into Tailwind utilities using `@theme inline`, and applies base styles through the correct `@layer base` structure. It also configures a ThemeProvider-based dark mode implementation that toggles the `.dark` class on the root HTML element, allowing UI updates without component re-rendering. Additional guidance includes semantic token naming, foreground/background pairing, WCAG contrast recommendations, and chart colour handling using dedicated variables.

This skill is useful for developers building React and Vite applications with Tailwind v4 and shadcn/ui, especially teams implementing reusable design systems or migrating older Tailwind projects to the new architecture. It is particularly valuable for frontend engineers troubleshooting theme-related issues, setting up dark mode support, or creating semantic, maintainable colour systems based on CSS variables and utility classes.