skills.rest
sandalsoft
sandalsoftCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui theming with CSS variables and dark mode for React+Vite projects.

Updated Mar 28, 2026
Search Tags:#theming#vite#tailwind#shadcn-ui#dark-mode#css-variables#tailwind-v4
One-click install
npx skills add https://github.com/sandalsoft/agent-skills --skill tailwind-v4-shadcn-sandalsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/sandalsoft/agent-skills/tree/main/tailwind-v4-shadcn
Command: npx skills add https://github.com/sandalsoft/agent-skills --skill tailwind-v4-shadcn-sandalsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind v4 + shadcn/ui theming often requires careful setup to support dark mode, semantic color tokens, and a CSS-first architecture. This guide provides a proven four-step pattern to define CSS variables at root, map them to Tailwind utilities with @theme inline, apply base styles, and enable automatic dark mode, dramatically reducing common errors and migration complexities.

Core Features & Use Cases

  • Define CSS variables at root level and keep them centralized for all themes.
  • Map variables to Tailwind utilities with @theme inline to generate semantic classes like bg-background and text-foreground.
  • Provide a ThemeProvider-based dark mode approach that toggles a .dark class on <html> and persists user choice.
  • Offer migration guidance from v3 (e.g., removing tailwind.config.ts, avoiding @apply in v4) and a structured reference for common gotchas.

Quick Start

Run through the four-step setup to enable CSS-variable theming and automatic dark mode in a React + Vite project.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema
Can I migrate from Tailwind v3 to v4 for my shadcn/ui project?▼

Yes, you can migrate from Tailwind v3 to v4 by removing the legacy tailwind.config.ts file and avoiding @apply in v4. The migration process involves replacing JavaScript configuration with a CSS-first architecture using @theme inline mappings for semantic tokens.

Why are my shadcn/ui semantic colors not applying correctly in Tailwind v4?▼

Dark mode in Tailwind v4 with shadcn/ui works by using a ThemeProvider to toggle a .dark class on the <html> element. This approach persists user choice and automatically applies the correct semantic color tokens defined in your root CSS variables.

What is the best way to configure semantic color tokens in Tailwind v4?▼

Yes, this Tailwind v4 theming setup is specifically designed for React projects using Vite. It handles the integration of shadcn/ui components and CSS variables within the Vite build environment to ensure proper dark mode and semantic token generation.

Why are my shadcn/ui semantic colors not applying correctly in Tailwind v4?▼

The best way to configure semantic color tokens in Tailwind v4 is using a CSS-first architecture with @theme inline. This maps your root-level CSS variables to Tailwind utilities, generating semantic classes like bg-background and text-foreground without requiring a JavaScript configuration file.

How do I set up Tailwind v4 theming with shadcn/ui and CSS variables?▼

Semantic colors in Tailwind v4 often fail due to incorrect root-level variable definitions or missing @theme inline mappings. Ensure your base styles are unwrapped and variables are defined at the root to prevent common setup errors and migration issues.

Related Skills

Explore More Software Engineering Skills→
mauroviverosmauroviveros

tailwind-v4-shadcn

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

Community
Advanced
nickstradnickstrad

ui-styling

Guides theme-driven UI styling for Next.js apps using Tailwind CSS 4 and shadcn/ui.

Community
Basic
lumacoderlumacoder

tailwind-v4-+-shadcn/ui-stack

Set up Tailwind v4 with shadcn/ui for React/Vite projects.

Community
Advanced
GitCoder052023GitCoder052023
1

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui for React projects using CSS-first theming.

Community
Advanced