skills.rest
MaxMiksa
MaxMiksaCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
kmshihab7878kmshihab7878
6

web-artifacts-builder

Bundle React and TypeScript projects into a single self-contained HTML file.

Community
Advanced
RishabhupadhyaRishabhupadhya

web-artifacts-builder

Bundle multi-component Claude artifacts into a single HTML document.

Community
Advanced
MesferAliMesferAli

atlas-ui

Provide guidance on Atlas UI components, theming, forms, and data display.

Community
Intermediate
TheGreatLTheGreatL

web-component-design

Create reusable UI components with React, Vue, and Svelte.

Community
Advanced