skills.rest
mrdonlee
mrdonleeCOMMUNITY
Explore all skills by this author →
Website𝕏@_mrdonleeGitHub

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
One-click install
npx skills add https://github.com/mrdonlee/dotfiles --skill tailwind-v4-shadcn-mrdonlee
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
secondskysecondsky
204

tailwind-v4-shadcn

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

Community
Advanced
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
lumacoderlumacoder

tailwind-v4-+-shadcn/ui-stack

Set up Tailwind v4 with shadcn/ui for React/Vite projects.

Community
Advanced
msichtermanmsichterman

expo-tailwind-setup

Integrates Tailwind CSS v4 with Expo using NativeWind v5 and react-native-css via Metro and PostCSS configuration.

Community
Intermediate