tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui with CSS variables and Vite.

Updated Jul 9, 2026

Search Tags:#frontend #react #css #migration #vite #tailwind #shadcn

Ready to run

npx skills add https://github.com/jdrets/iSeeyou --skill tailwind-v4-shadcn-jdrets

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, tw-animate-css, clsx, tailwind-merge, and includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill resolves the complex architectural requirements of integrating Tailwind v4 with shadcn/ui, preventing common build failures, dark mode conflicts, and deprecated v3 patterns.

Core Features & Use Cases

Architecture Enforcement: Implements the mandatory four-step CSS variable pattern required for v4.
Error Prevention: Automatically addresses 8 documented breaking changes, including @apply deprecations and layer ordering issues.
Use Case: Use this when initializing a new Vite-based React project or migrating an existing v3 codebase to ensure a stable, production-ready styling foundation.

Quick Start

Use the tailwind-v4-shadcn skill to initialize a new project with the correct CSS variable architecture and Vite configuration.

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 Vite and React project?▼

To set up Tailwind CSS v4 with shadcn/ui, configure the mandatory CSS variable architecture and @theme inline mapping, integrate the Vite plugin, and remove legacy v3 configuration files.

What breaking changes are handled when migrating shadcn/ui to Tailwind v4?▼

Migrating shadcn/ui to Tailwind v4 automatically resolves 8 documented breaking changes, including @apply deprecations and layer ordering issues, to prevent common build failures.

Does Tailwind v4 support automatic dark mode for shadcn/ui components?▼

Yes, Tailwind v4 supports automatic dark mode for shadcn/ui components by implementing the mandatory four-step CSS variable pattern required for the v4 architecture.

Why are my Tailwind CSS v4 styles breaking after migrating from v3?▼

Tailwind CSS v4 styles break after migrating from v3 due to legacy configuration files and deprecated patterns; enforcing the new @theme inline mapping and correct layer ordering resolves these conflicts.

Can I use legacy tailwind.config.js files with Tailwind v4 and shadcn/ui?▼

No, using legacy configuration files with Tailwind v4 and shadcn/ui causes conflicts; the setup requires removing v3 config files and adopting the new CSS variable architecture.

What dependencies are required for a production-ready Tailwind v4 and shadcn/ui setup?▼

A production-ready Tailwind v4 and shadcn/ui setup requires dependencies including tailwindcss, @tailwindcss/vite, tw-animate-css, clsx, and tailwind-merge for robust styling.