tailwind-v4-shadcn

Solid

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

Web & Frontend 160 stars 25 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
73
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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 ...

Details

Author
secondsky
Repository
secondsky/claude-skills
Created
6 months ago
Last Updated
2 weeks ago
Language
TypeScript
License
MIT

Integrates with

Cloudflare · Cloud Tailwind CSS · Frontend WordPress · CMS

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

335 Updated today
aiskillstore
Web & Frontend Solid

tailwind-theme-builder

Set up Tailwind v4 with shadcn/ui themed UI. Workflow: install dependencies, configure CSS variables with @theme inline, set up dark mode, verify. Use when initialising React projects with Tailwind v4, setting up shadcn/ui theming, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

809 Updated 2 weeks ago
jezweb
Web & Frontend Listed

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS. Triggers on tailwind, shadcn, utility classes, CSS variables, OKLCH, component styling, theming, dark mode, radix ui.

29 Updated 5 days ago
tenequm
Web & Frontend Listed

050103-tailwind-implement

Tailwind CSS v4 CSS-first configuration and shadcn/ui component composition — CVA factories, styling rules, forms, icons, Base vs Radix API.

1 Updated 3 days ago
natuleadan
Web & Frontend Solid

tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

36,166 Updated yesterday
wshobson