skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui in React projects with Vite.

Updated May 4, 2026
Search Tags:#react#shadcn/ui#vite#dark mode#css variables#tailwind v4#themeprovider
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill tailwind-v4-shadcn-jtgiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/jtgiron/portfolio --skill tailwind-v4-shadcn-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the trial-and-error from setting up Tailwind CSS v4 with shadcn/ui in React projects, especially when theme colors, dark mode, or migration details break expected styling behavior.

Core Features & Use Cases

  • Production Setup Guidance: Provides a proven Vite + React configuration for Tailwind v4, shadcn/ui, and path aliases.
  • Theme Architecture: Explains the required CSS variable model, @theme inline mapping, and .dark class behavior so utilities like bg-primary work correctly.
  • Troubleshooting and Migration: Helps debug common v4 issues such as duplicate base layers, missing theme tokens, wrong plugin syntax, and moving from Tailwind v3 to v4.
  • Use Case: A developer can use this Skill to bootstrap a new portfolio or dashboard app, wire up dark mode, and avoid the most common shadcn/ui initialization mistakes.

Quick Start

Use this Skill to configure a React project with Tailwind v4 and shadcn/ui by following its production-tested setup pattern for Vite, CSS variables, and dark mode.

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 v4 with shadcn/ui in a Vite and React project?▼

To set up Tailwind v4 with shadcn/ui, use the @tailwindcss/vite plugin, configure an empty Tailwind config in components.json, and map root-level hsl-wrapped CSS variables through @theme inline.

Why does dark mode not work with shadcn/ui and Tailwind v4?▼

Dark mode fails if the ThemeProvider does not toggle the .dark class. You must properly map your CSS variables through @theme inline so utilities like bg-primary respond correctly to the class toggle.

How do I migrate a React project from Tailwind v3 to Tailwind v4 with shadcn/ui?▼

Migrating from Tailwind v3 to v4 requires resolving duplicate base layers, updating to the @tailwindcss/vite plugin syntax, and ensuring all theme tokens are correctly mapped in the new CSS variable model.

Does shadcn/ui require a specific CSS variable format for Tailwind v4?▼

Yes, shadcn/ui requires root-level hsl-wrapped CSS variables. These must be mapped through the @theme inline directive in your stylesheet to ensure Tailwind utilities generate the correct styles.

How do I fix missing theme tokens and broken styles in Tailwind v4?▼

Fix missing theme tokens by verifying your components.json has an empty Tailwind config and checking that all hsl-wrapped CSS variables are correctly referenced in your @theme inline mapping block.

What is the best way to configure path aliases for shadcn/ui in Vite?▼

The best way to configure path aliases for shadcn/ui in Vite is following a production-tested Vite and React configuration that ensures component initialization commands resolve paths correctly.

Related Skills

Explore More Software Engineering Skills→
fredericvilcotfredericvilcot
13

init-frontend

Initialize a React frontend project with Vite, TypeScript, and Vitest.

Community
Intermediate
James-GamboaJames-Gamboa

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in React Vite projects.

Community
Advanced
vecearvecear

dark-mode-implementer

Implement dark/light theming with system detection and localStorage persistence in React apps.

Community
Advanced
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced