tailwind-v4-shadcn

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

4|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/KuaaMU/omnihive --skill tailwind-v4-shadcn-kuaamu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/KuaaMU/omnihive/tree/main/library/real-skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/KuaaMU/omnihive --skill tailwind-v4-shadcn-kuaamu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and templates (resource) components.

What problem does it solve?

This Skill provides a robust, production-tested setup for Tailwind CSS v4 integrated with shadcn/ui, Vite, and React, preventing common configuration errors and speeding up development.

Core Features & Use Cases

  • Streamlined Setup: Quickly initialize new React projects with Tailwind v4 and shadcn/ui.
  • Dark Mode Implementation: Includes a complete, working dark mode setup with theme switching.
  • Error Prevention: Avoids known issues like tw-animate-css errors, duplicate @layer blocks, and incorrect configuration.
  • Use Case: When starting a new React project that requires a modern UI stack with dark mode support, use this Skill to ensure a correct and efficient Tailwind CSS and shadcn/ui configuration from the outset.

Quick Start

Run bun add tailwindcss @tailwindcss/vite then pnpm dlx shadcn@latest init.

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?

To set up Tailwind v4 with shadcn/ui, run `bun add tailwindcss @tailwindcss/vite` followed by `pnpm dlx shadcn@latest init` to configure the CSS-first architecture and Vite plugin automatically.

Why does my shadcn/ui dark mode implementation fail after upgrading to Tailwind CSS v4?

Dark mode implementation in Tailwind CSS v4 fails if the ThemeProvider and CSS variable architecture are not properly configured for the new CSS-first setup, which this configuration addresses to ensure working theme switching.

What is the best way to avoid tw-animate-css errors and duplicate @layer blocks in shadcn/ui?

The best way to avoid tw-animate-css errors and duplicate @layer blocks is using a production-tested Tailwind v4 setup that correctly implements the @plugin directive and prevents common configuration pitfalls.

Does Tailwind v4 CSS-first configuration work with Vite and React for production environments?

Yes, Tailwind v4 CSS-first configuration works with Vite and React for production environments by utilizing the @tailwindcss/vite plugin and @plugin directive to ensure robust and error-free styling setup.

How do I configure CSS variables for shadcn/ui themes in Tailwind v4?

Configuring CSS variables for shadcn/ui themes in Tailwind v4 involves defining the architecture within the CSS-first configuration and integrating a ThemeProvider to manage dark mode implementation and theme switching.