tailwind-v4-shadcn

Name: tailwind-v4-shadcn
Availability: InStock
Author: planeinabottle

Configure Tailwind v4 and shadcn/ui with CSS-variable theming for React Vite projects.

1|Updated Aug 26, 2025

Search Tags:#theming #react #vite #shadcn #dark-mode #css-variables #tailwind v4

Ready to run

npx skills add https://github.com/PlaneInABottle/configs --skill tailwind-v4-shadcn-planeinabottle

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/PlaneInABottle/configs/tree/main/agents/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/PlaneInABottle/configs --skill tailwind-v4-shadcn-planeinabottle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind v4 + shadcn/ui setups can be error-prone, especially around CSS variable theming, dark mode, and v3 migration pitfalls. This Skill provides a repeatable pattern and ready-to-use configuration to reduce manual setup time and avoid common misconfigurations.

Core Features & Use Cases

Four-step architecture: define CSS variables at root, map to Tailwind with @theme inline, apply base styles, and rely on automatic dark mode.
Provides a production-ready scaffold for React projects using Vite, Tailwind v4, and shadcn/ui, and helps fix color issues and tw-animate-css references.
Use cases include initializing new React projects or migrating existing ones from v3 to v4 while preserving semantic theming.

Quick Start

Install and configure Tailwind v4 + shadcn/ui by following the four-step pattern and run the provided install/init commands.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema

How do I configure Tailwind v4 with shadcn/ui CSS variables for dark mode?▼

Configure Tailwind v4 with shadcn/ui by defining CSS variables at the root, mapping them to Tailwind using the @theme inline directive, applying base styles, and relying on automatic dark mode via a ThemeProvider.

What is the best way to migrate a React and Vite project from Tailwind v3 to v4?▼

Migrate React and Vite projects from Tailwind v3 to v4 by installing the Vite plugin, enforcing the removal of tailwind.config.ts, and applying a four-step CSS-variable theming architecture to preserve semantic design tokens.

Does shadcn/ui with Tailwind v4 require removing tailwind.config.ts?▼

Yes, Tailwind v4 setups with shadcn/ui require removing tailwind.config.ts and using the Vite plugin, shifting your configuration directly into CSS to properly manage design tokens and automatic dark mode.

Why are my shadcn/ui theme colors or tw-animate-css references broken after upgrading to Tailwind v4?▼

Broken shadcn/ui theme colors and tw-animate-css references after upgrading to Tailwind v4 typically stem from incorrect CSS variable mapping, which this Skill resolves through its production-ready four-step theming scaffold.

Can I use semantic theming tokens with shadcn/ui and Tailwind v4 in a new React project?▼

Yes, you can establish semantic theming tokens in a new React project by following a repeatable pattern that defines CSS variables and maps them to Tailwind v4, ensuring consistent design tokens across light and dark modes.

What steps are needed to set up a ThemeProvider for shadcn/ui automatic dark mode?▼

Setting up a ThemeProvider for shadcn/ui automatic dark mode involves defining CSS variables at the root, mapping them with @theme inline, and applying base styles so the Vite React project can switch themes automatically.