tailwind-v4-shadcn

Overview

A Claude Code skill that provides a production-tested setup guide for Tailwind CSS v4 with shadcn/ui, using the @theme inline pattern and CSS variable architecture. It follows a mandatory four-step pattern (CSS variables, Tailwind mapping, base styles, automatic dark mode) and documents how to prevent 8 common configuration errors.

Key Features

• Four-Step Architecture - Mandatory sequential setup: define CSS variables at root, map to Tailwind utilities via @theme inline, apply base styles, and achieve automatic dark mode without dark: variants
• Error Prevention - Documents and prevents 8 common errors including tw-animate-css issues, @theme inline dark mode conflicts, @apply breaking, and v3 migration pitfalls
• v4 Migration Ready - Handles the transition from Tailwind v3 (config file-based) to v4 (CSS-first) including removal of tailwind.config.ts
• shadcn/ui Integration - Proper components.json configuration with empty tailwind config field for v4 compatibility and tw-animate-css setup
• Automatic Dark Mode - CSS variable-driven theming that switches between light and dark modes automatically without per-component dark variant classes

Who is this for?

This skill is designed for React developers initializing projects with Tailwind CSS v4 and shadcn/ui who need a reliable, production-tested configuration pattern. It is particularly useful for developers experiencing color, animation, or dark mode issues after upgrading from Tailwind v3, or those starting fresh who want to avoid common setup mistakes.