tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui using CSS variables and dark mode.

204|30|Updated Nov 8, 2025

Search Tags:#shadcn/ui #dark mode #semantic tokens #CSS variables #Tailwind v4

Ready to run

npx skills add https://github.com/secondsky/claude-skills --skill tailwind-v4-shadcn-secondsky

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/secondsky/claude-skills/tree/main/plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/secondsky/claude-skills --skill tailwind-v4-shadcn-secondsky

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides production-ready setup for Tailwind v4 with shadcn/ui, including CSS variables, semantic tokens, and theme patterns.

Core Features & Use Cases

Semantic token-based theming with CSS variables
Dark mode support and theme switching
Efficient setup for Next.js/React apps
Migration patterns from v3

Quick Start

Follow the migration and setup steps to initialize Tailwind v4 with shadcn/ui.

Frequently Asked Questions about tailwind-v4-shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up Tailwind CSS v4 with shadcn/ui in a React project?▼

Set up Tailwind v4 with shadcn/ui by initializing CSS variables in your root stylesheet, configuring the @theme directive for semantic tokens, and installing shadcn/ui components via the CLI. Ensure your build tool (Vite or Next.js) processes the new v4 syntax correctly, and remove legacy tailwind.config.ts if migrating from v3.

Does Tailwind v4 work with dark mode and CSS variable theming?▼

Yes. Tailwind v4 supports dark mode through CSS variables mapped to :root and .dark selectors. Define semantic tokens as CSS variables in your stylesheet, then reference them in component styles. This approach enables theme switching without rebuilding and integrates seamlessly with shadcn/ui's theming system.

How do I migrate from Tailwind v3 to v4 with shadcn/ui components?▼

Migrate from Tailwind v3 to v4 by converting your tailwind.config.ts to @theme directives in CSS, updating CSS variable syntax, and loading plugins via @plugin instead of the config file. Test shadcn/ui components for style compatibility, ensure dark mode CSS variables are properly scoped, and verify Vite or Next.js processes the new format.

What's the correct way to load Tailwind v4 plugins with shadcn/ui?▼

Load Tailwind v4 plugins using the @plugin directive in your main CSS file rather than the config object. This approach works with shadcn/ui's component system and integrates official plugins cleanly without conflicts. Remove plugin references from legacy config files to avoid duplication.

Can I use Tailwind v4 semantic tokens to customize shadcn/ui theme colors?▼

Yes. Define semantic tokens as CSS variables (e.g., --primary, --secondary) in your @theme block, then reference them in shadcn/ui component styles. This enables consistent theming across all components, supports dark mode switching, and centralizes color management without modifying component source code.

Why does my Tailwind v4 + shadcn/ui setup fail to load styles correctly?▼

Common causes include incorrect CSS variable scoping (ensure :root and .dark selectors are defined), missing @plugin directives for official plugins, or incompatible Vite/React build configuration. Verify your build tool processes Tailwind v4 syntax, check that shadcn/ui components reference the correct CSS variables, and confirm dark mode detection logic is working.