skills.rest
mauroviveros
mauroviverosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4-shadcn

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

Updated Jan 19, 2026
Search Tags:#shadcn/ui#dark mode#css variables#tailwind v4#theme inline#react theming#plugin directive
One-click install
npx skills add https://github.com/mauroviveros/eventdex --skill tailwind-v4-shadcn-mauroviveros
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/mauroviveros/eventdex/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/mauroviveros/eventdex --skill tailwind-v4-shadcn-mauroviveros

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines bootstrapping a React project with Tailwind CSS v4 and the shadcn/ui component library, including theming, dark mode, and preemptive handling of common v3 pitfalls.

Core Features & Use Cases

  • Production-tested setup for Tailwind v4 + shadcn/ui in Vite + React.
  • CSS variable architecture with CSS tokens that support dark mode via a ThemeProvider.
  • Vite configuration using the CSS-first plugin approach and @plugin directives.
  • Clear migration guidance from Tailwind v3 and avoidance of common gotchas.

Quick Start

Initialize a new React + Vite project using the provided templates to enable Tailwind v4, shadcn/ui, and dark-mode theming.

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

To set up shadcn/ui with Tailwind v4 in React, configure Vite using the @tailwindcss/vite plugin, maintain an empty tailwind.config.ts, and utilize @plugin directives alongside CSS variables for theming.

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

Migrating shadcn/ui from Tailwind v3 to v4 requires shifting to a CSS-first configuration, adopting @plugin directives, and applying theme inline mappings to avoid common v3 pitfalls.

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

Dark mode theming with shadcn/ui and Tailwind v4 uses a CSS variable architecture where CSS tokens support dark mode via a ThemeProvider to toggle styles dynamically.

Do I need tailwind.config.ts for shadcn/ui when using Tailwind v4?▼

In a Tailwind v4 setup for shadcn/ui, you keep an empty tailwind.config.ts file because configuration is handled through the CSS-first plugin approach and @plugin directives.

Why should I use the @tailwindcss/vite plugin for Tailwind v4?▼

Using the @tailwindcss/vite plugin for Tailwind v4 enables the CSS-first plugin approach required to properly parse directives and map theme inline configurations for React components.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
bmadiganbmadigan
1

shadcn-ui

Create public-facing React interfaces with ShadCN UI and Inertia.js.

Community
Intermediate
lawalletiolawalletio
3

tailwind-v4-shadcn

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

Official
Advanced
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced