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 2 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
16
Recency 20%
100
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
NewAbra
Repository
NewAbra/auto-co-meta
Created
11 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Integrates with

Next.js · Frontend Tailwind CSS · Frontend WordPress · CMS

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

styling-with-tailwind-shadcn

Implements the Calm Tech design system using Tailwind CSS v4 and Shadcn UI. Use when writing styles, building components, or theming. For design decisions, see designing-frontend.

8 Updated today
dork-labs
Web & Frontend Listed

tailwindcss-development

Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.

1 Updated yesterday
rcdelfin
Web & Frontend Listed

tailwind-patterns

Tailwind CSS v4, CVA component variants, shadcn/ui patterns, semantic tokens, responsive design

3 Updated 5 days ago
AppVerk