skills.rest
jdrets
jdretsCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jdrets/iSeeyou --skill tailwind-v4-shadcn-jdrets
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
PolicyEnginePolicyEngine

policyengine-ui-kit-consumer

Integrate the PolicyEngine UI Kit into frontend projects with Tailwind and PostCSS configuration.

Official
Intermediate
AppleLampsAppleLamps

new-component

Generate React component scaffolds with server/client templates and TypeScript props interfaces.

Community
Intermediate