tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

1|Updated Jan 15, 2026

Search Tags:#theming #react #vite #shadcn-ui #dark-mode #css-variables #tailwind-v4

Ready to run

npx skills add https://github.com/Pallepadehat/agentkit --skill tailwind-v4-shadcn-pallepadehat

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/Pallepadehat/agentkit/tree/main/.agent/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/Pallepadehat/agentkit --skill tailwind-v4-shadcn-pallepadehat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the setup of Tailwind v4 and shadcn/ui in React projects, delivering a ready-to-use architecture with CSS variables and automatic dark mode, eliminating manual, error-prone configurations.

Core Features & Use Cases

Four-step architecture: CSS variables at root, @theme inline mapping, base styles, and automatic dark mode.
Production-ready templates: Includes ready-to-copy files (index.css, vite.config.ts, theme-provider.tsx, etc.) and a working ThemeProvider.
Use Case: Initialize a new Vite + React project with Tailwind v4 or migrate an existing v3 project to v4, ensuring semantic colors and dark mode.

Quick Start

Use the skill to set up a new Vite + React project with Tailwind v4 and shadcn/ui by following the 4-step pattern and applying the included templates.

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 React project?▼

Set up Tailwind v4 and shadcn/ui using a four-step architecture: define CSS variables at root, map them with @theme inline, apply base styles, and integrate a dark-mode provider. This Skill automates the entire process with production-ready templates for Vite + React projects.

Can I migrate an existing Tailwind v3 project to v4 with dark mode?▼

Yes. This Skill handles migrations from v3 to v4 by establishing CSS-variable theming, updating Tailwind configuration to v4's CSS-first syntax, and adding automatic dark-mode support through a ready-made ThemeProvider component.

What's the best way to implement semantic color variables in Tailwind v4?▼

Use CSS variables mapped through Tailwind v4's @theme inline syntax. This Skill provides the exact variable definitions and configuration pattern to align semantic colors with your design system while enabling effortless dark-mode switching.

Do I need to manually configure dark mode for Tailwind v4 and shadcn/ui?▼

No. This Skill includes a complete ThemeProvider integration that automates dark-mode detection and switching, eliminating manual configuration of dark-mode classes and provider setup.

What files do I need to apply to start using Tailwind v4 with shadcn/ui?▼

This Skill provides ready-to-copy templates: index.css with CSS variables, vite.config.ts configured for v4, tailwind.config.js with @theme mapping, and theme-provider.tsx for dark-mode integration. Apply these directly to initialize your project.

Does Tailwind v4's CSS-first configuration work with React component libraries like shadcn/ui?▼

Yes. Tailwind v4's CSS-first approach with @theme inline integrates seamlessly with shadcn/ui. This Skill demonstrates the exact pattern for aligning component styles with v4 configuration and CSS-variable theming.