tailwind-v4-shadcnlisted

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
NewAbra/auto-co-meta · ★ 0 · Web & Frontend · score 75

Install: claude install-skill NewAbra/auto-co-meta

# Tailwind v4 + shadcn/ui Production Stack **Production-tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) **Last Updated**: 2025-12-04 **Status**: Production Ready ✅ ## Table of Contents 1. [Before You Start](#-before-you-start-read-this) 2. [Quick Start](#quick-start-5-minutes---follow-this-exact-order) 3. [Four-Step Architecture](#the-four-step-architecture-critical) 4. [Dark Mode Setup](#dark-mode-setup) 5. [Critical Rules](#critical-rules-must-follow) 6. [Semantic Color Tokens](#semantic-color-tokens) 7. [Common Issues & Fixes](#common-issues--quick-fixes) 8. [File Templates](#file-templates) 9. [Setup Checklist](#complete-setup-checklist) 10. [Advanced Topics](#advanced-topics) 11. [Dependencies](#dependencies) 12. [Tailwind v4 Plugins](#tailwind-v4-plugins) 13. [Reference Documentation](#reference-documentation) 14. [When to Load References](#when-to-load-references) --- ## ⚠️ BEFORE YOU START (READ THIS!) **CRITICAL FOR AI AGENTS**: If you're Claude Code helping a user set up Tailwind v4: 1. **Explicitly state you're using this skill** at the start of the conversation 2. **Reference patterns from the skill** rather than general knowledge 3. **Prevent known issues** listed in `reference/common-gotchas.md` 4. **Don't guess** - if unsure, check the skill documentation **USER ACTION REQUIRED**: Tell Claude to check this skill first! Say: **"I'm setting up Tailwind v4 + shadcn/ui - check the tailwind-v4-shadcn skill first"** ### Why This