skills.rest
Devinga-com-br
Devinga-com-brOFFICIAL
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui using CSS variables and automatic dark mode.

Updated Oct 13, 2025
Search Tags:#theming#react#vite#tailwind#shadcn-ui#dark-mode#tailwind-v4
One-click install
npx skills add https://github.com/Devinga-com-br/bi-saas --skill tailwind-v4-shadcn-devinga-com-br
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/Devinga-com-br/bi-saas/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/Devinga-com-br/bi-saas --skill tailwind-v4-shadcn-devinga-com-br

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tailwindcss/vite, tailwindcss.

What problem does it solve?

Set up Tailwind v4 with shadcn/ui using a CSS-variable-based theming pattern and automatic dark mode, reducing migration friction and common setup errors.

Core Features & Use Cases

  • Four-step architecture: define root CSS variables, map with @theme inline, apply base styles, enable automatic dark mode.
  • Migration guidance: addresses common v3→v4 pitfalls and ensures a clean, maintainable theme pipeline.
  • Use cases: starting a new React project with semantic colors, or upgrading an existing project to v4 with shadcn UI.

Quick Start

  1. Install dependencies: npm install tailwindcss @tailwindcss/vite
  2. Configure Vite to use the Tailwind v4 plugin
  3. Initialize shadcn UI with CSS variables and empty tailwind config
  4. Wrap your app with the ThemeProvider and verify 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 and automatic dark mode in Vite?▼

To set up Tailwind v4 with shadcn/ui, install tailwindcss and @tailwindcss/vite, configure the Vite plugin, define root CSS variables, map them using @theme inline, apply base styles, and enable automatic dark mode for semantic theming.

What is the @theme inline pattern for Tailwind v4 theming?▼

The @theme inline pattern maps root CSS variables to Tailwind's theme system, enabling semantic theming and automatic dark mode switching in shadcn/ui without requiring a JavaScript tailwind config file.

Can I migrate an existing React project from Tailwind v3 to v4 with shadcn-ui?▼

Yes, you can migrate existing React projects from Tailwind v3 to v4. The process provides migration guidance to address common v3 to v4 pitfalls, ensuring a clean theme pipeline using CSS-first configuration and the vite plugin.

Does shadcn-ui require a tailwind config file when using Tailwind v4?▼

No, shadcn-ui with Tailwind v4 uses CSS-first configuration. You initialize shadcn UI with CSS variables and an empty tailwind config, relying entirely on the @tailwindcss/vite plugin and CSS variable mapping.

Why does my dark mode not work after migrating to Tailwind v4?▼

Dark mode fails if the four-step architecture is incomplete. You must define root CSS variables, map them with @theme inline, apply base styles, and ensure automatic dark mode is enabled via the vite plugin and CSS variables.

Related Skills

Explore More Software Engineering Skills→
mrdonleemrdonlee

tailwind-v4-shadcn

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

Community
Advanced
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

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

Community
Advanced
sjmontanosjmontano

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui with dark mode and CSS variables for React.

Community
Advanced
holger1411holger1411
70

tailwind

Replace hardcoded colors and inline styles with Tailwind v4 semantic tokens.

Community
Advanced