tailwind-v4-shadcn

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

Updated Mar 15, 2025

Search Tags:#theming #react #shadcn/ui #vite #tailwind #ui components #dark mode

Ready to run

npx skills add https://github.com/mrdonlee/dotfiles --skill tailwind-v4-shadcn-mrdonlee

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tailwindcss/vite, tw-animate-css, clsx, tailwind-merge, and includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill streamlines the setup of Tailwind CSS v4 and shadcn/ui in React projects, preventing common configuration errors and ensuring a robust, maintainable theming architecture.

Core Features & Use Cases

Tailwind v4 Integration: Configures the latest Tailwind CSS version with Vite.
shadcn/ui Setup: Integrates shadcn/ui components with a CSS-variable-based theming system.
Dark Mode: Implements automatic dark mode switching using a ThemeProvider.
Error Prevention: Addresses 8 common errors related to Tailwind v4 migration, CSS variables, and shadcn/ui setup.
Use Case: When starting a new React project and needing a modern, accessible, and themable UI, use this Skill to quickly establish a best-practice foundation.

Quick Start

Run the setup command to install Tailwind v4 and shadcn/ui dependencies and configure your project.

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 CSS v4 and shadcn/ui in a React Vite project?▼

To configure Tailwind CSS v4 and shadcn/ui in React, use this Skill to install dependencies like @tailwindcss/vite and establish a CSS-variable-based theming architecture. It automates setup and prevents common configuration errors.

What is the best way to set up dark mode with shadcn/ui and Tailwind v4?▼

The best way to set up dark mode is by implementing a ThemeProvider for automatic switching. This Skill configures a CSS-variable-based theming architecture that natively supports dark mode toggling within your React application.

Why does my Tailwind v4 migration break shadcn/ui CSS variables?▼

Tailwind v4 migration often breaks shadcn/ui CSS variables due to incorrect configuration. This Skill addresses 8 common migration and setup errors, ensuring your CSS variables and theming architecture remain robust and maintainable.

Do I need @tailwindcss/vite to use shadcn/ui components with Tailwind v4?▼

Yes, you need @tailwindcss/vite to integrate Tailwind v4 with Vite when using shadcn/ui. This Skill requires installing tailwindcss, this Vite plugin, and shadcn/ui components to establish the modern UI foundation.

Can I use this Tailwind v4 setup for an existing React project or only new ones?▼

This setup is primarily designed for starting a new React project to quickly establish a best-practice UI foundation. However, it also addresses common migration errors, making it applicable for upgrading existing Vite projects.

What dependencies are required for a CSS-variable-based theming architecture in Vite?▼

A CSS-variable-based theming architecture in Vite requires @tailwindcss/vite, tw-animate-css, clsx, and tailwind-merge. This Skill configures these dependencies to ensure maintainable styling and automatic dark mode support.