tailwind-v4-shadcn

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

2.3k|357|Updated Feb 12, 2026

Search Tags:#react #shadcn/ui #vite #tailwind #dark mode #css variables

Ready to run

npx skills add https://github.com/MaxMiksa/Auto-Company --skill tailwind-v4-shadcn-maxmiksa

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/MaxMiksa/Auto-Company/tree/main/.claude/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/MaxMiksa/Auto-Company --skill tailwind-v4-shadcn-maxmiksa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires clsx, tailwind-merge, @radix-ui/react-*, lucide-react, and 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, streamlining the initialization of modern React projects and preventing common configuration errors.

Core Features & Use Cases

Rapid Project Initialization: Quickly set up Tailwind v4 and shadcn/ui with correct configurations for Vite, React, and TypeScript.
Dark Mode Implementation: Includes a complete, functional dark mode setup with a ThemeProvider and toggle component.
Use Case: When starting a new React project that requires a modern UI framework, use this Skill to ensure Tailwind v4 and shadcn/ui are configured correctly from the outset, avoiding hours of debugging common setup issues.

Quick Start

Follow the 5-minute quick start guide in the skill's documentation to install dependencies and configure Vite.

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 Vite?▼

To set up Tailwind v4 with shadcn/ui and Vite, this Skill provides production-tested configurations that initialize React projects correctly, applying CSS variable architecture and preventing common setup errors.

Does shadcn/ui support Tailwind CSS v4?▼

Yes, shadcn/ui supports Tailwind CSS v4. This Skill provides the required Vite configuration and CSS variable architecture to ensure compatibility and prevent common v4 gotchas during project initialization.

How do I implement dark mode in a React app using Tailwind v4?▼

To implement dark mode in React with Tailwind v4, this Skill includes a complete setup featuring a ThemeProvider and toggle component, leveraging CSS variables for functional theme switching.

Why does my shadcn/ui installation fail with Tailwind v4?▼

shadcn/ui installation with Tailwind v4 often fails due to incorrect Vite setup or missing CSS variables. This Skill addresses common v4 gotchas by providing production-tested initialization patterns.

What dependencies are needed for shadcn/ui with Tailwind v4?▼

Dependencies required for shadcn/ui with Tailwind v4 include clsx, tailwind-merge, Radix UI primitives, and lucide-react. This Skill integrates these packages into a cohesive Vite and React setup.

Can I use Radix UI components with Tailwind CSS v4?▼

Yes, you can use Radix UI components with Tailwind CSS v4. This Skill integrates Radix UI primitives into the shadcn/ui architecture, ensuring proper styling within Vite environments.