skills.rest
James-Gamboa
James-GamboaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4-shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 + shadcn/ui integration in React projects can be error-prone and time-consuming; this guide provides a production-ready blueprint to streamline setup, unify theming, and prevent common pitfalls.

Core Features & Use Cases

  • End-to-end setup for Tailwind v4 with shadcn/ui, Vite, and React.
  • Dark mode with ThemeProvider and centralized CSS variables to ensure consistent theming.
  • Migration-ready guidance from Tailwind v3 and strategies for resolving color/theming issues.
  • Clear patterns for semantic color tokens and inline theme mappings to reduce maintenance overhead.

Use Case: Ideal for starting a new React project with v4 theming or upgrading an existing app to support dark mode and semantic tokens with minimal friction.

Quick Start

Install dependencies and start the development server following the exact order in this guide to reproduce the production-tested setup.

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

Setting up Tailwind v4 with shadcn/ui involves configuring Vite, integrating ThemeProvider, and mapping inline theme mappings using @theme inline. This ensures semantic color tokens and dark mode are wired correctly for production.

What is the best way to migrate from Tailwind v3 to v4 while using shadcn/ui?▼

Migrating from Tailwind v3 to v4 with shadcn/ui requires updating your CSS variable strategy and applying @theme inline mappings. This guide provides a blueprint to resolve common color and theming migration issues.

How does dark mode work with shadcn/ui and Tailwind v4 CSS variables?▼

Dark mode in Tailwind v4 and shadcn/ui works through a ThemeProvider and centralized CSS variables. By wiring semantic color tokens via @theme inline, the UI switches themes consistently without manual style overrides.

Do I need a specific CSS variable strategy for shadcn/ui to work with Tailwind v4?▼

Yes, shadcn/ui with Tailwind v4 requires a CSS variable strategy utilizing @theme inline. This approach unifies theming, maps semantic color tokens, and prevents common integration pitfalls during setup or migration.

Why does my Tailwind v4 shadcn/ui theming break after migrating from v3?▼

Tailwind v4 theming breaks after migrating from v3 due to misconfigured CSS variables or missing inline theme mappings. Applying the @theme inline directive ensures semantic tokens are correctly mapped to prevent color issues.

Related Skills

Explore More Software Engineering Skills→
leejayhsuleejayhsu

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup for React projects.

Community
Intermediate
iButtersiButters
3

css-tokens

Generate CSS design tokens for colors, spacing, typography, and theming.

Community
Intermediate
evolv3aievolv3ai
3

tailwind-v4-shadcn

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

Community
Intermediate
neverinfamousneverinfamous
19

tailwind-css

Configure Tailwind CSS v4 themes using @theme tokens and class-based dark mode.

Community
Advanced