skills.rest
chuwenWu
chuwenWuCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Bootstrap Tailwind v4 and shadcn/ui with Vite and React.

Updated Aug 23, 2026
Search Tags:#theming#react#vite#tailwind#shadcn#dark-mode#css-variables
One-click install
npx skills add https://github.com/chuwenWu/Auto-Company --skill tailwind-v4-shadcn-chuwenwu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/chuwenWu/Auto-Company/tree/main/.claude/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/chuwenWu/Auto-Company --skill tailwind-v4-shadcn-chuwenwu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a production-ready blueprint to bootstrap Tailwind CSS v4 with shadcn/ui in React projects, ensuring robust theming, dark mode, and streamlined setup.

Core Features & Use Cases

  • Production-tested setup for Tailwind v4 + shadcn/ui in Vite + React projects.
  • Dark mode support via ThemeProvider, CSS variables, and semantic tokens.
  • Clear guidance for Vite configuration, @plugin directives, and migration from v3.

Quick Start

Initialize a new React + Vite project and apply the provided Tailwind v4 + shadcn/ui setup to bootstrap the app.

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

Setting up Tailwind v4 with shadcn/ui involves configuring Vite, integrating ThemeProvider, and applying Tailwind v4 plugins via the @plugin directive. This blueprint provides a production-ready configuration with semantic tokens and dark mode support for React projects.

What is the best way to configure dark mode using CSS variables in Tailwind v4?▼

Configuring dark mode in Tailwind v4 is best achieved by using CSS variables alongside a ThemeProvider. This architecture leverages semantic tokens to seamlessly toggle between light and dark themes across your shadcn/ui React components.

Can I migrate my existing Tailwind v3 shadcn/ui project to Tailwind v4?▼

Yes, you can migrate from Tailwind v3 to v4. The process involves updating your Vite configuration, adopting the new @plugin directive for Tailwind v4 plugins, and aligning your CSS variable architecture with the updated semantic token structure.

Does shadcn/ui work properly with Tailwind v4 plugins using the @plugin directive?▼

Yes, shadcn/ui works properly with Tailwind v4 by utilizing the @plugin directive. This approach ensures that custom plugins and theming configurations are correctly registered within the Vite build process without internal conflicts.

Why do I need semantic tokens when setting up theming for shadcn/ui?▼

Semantic tokens are needed for shadcn/ui theming to abstract raw color values into contextual naming conventions. This allows the ThemeProvider to dynamically switch CSS variables, ensuring consistent dark mode and maintainable styling across your React application.

Related Skills

Explore More Software Engineering Skills→
evolv3aievolv3ai
3

tailwind-v4-shadcn

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

Community
Intermediate
suhwansuhwan

phase-5-design-system

Build a platform-independent design system with tokens and components for React, Flutter, iOS, and Android.

Community
Advanced
dhar174dhar174
1

web-artifacts-builder

Create multi-component React UI artifacts bundled into a single HTML file.

Community
Advanced
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced