tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui using CSS variables for theming.

417|7|Updated Jan 12, 2026

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

Ready to run

npx skills add https://github.com/Asymmetric-al/core --skill tailwind-v4-shadcn-asymmetric-al

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/Asymmetric-al/core/tree/main/.cursor/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/Asymmetric-al/core --skill tailwind-v4-shadcn-asymmetric-al

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the setup of Tailwind CSS v4 with shadcn/ui, preventing common configuration errors and ensuring a robust, production-ready theming architecture.

Core Features & Use Cases

Automated Setup: Guides you through installing and configuring Tailwind v4 and shadcn/ui.
CSS Variable Architecture: Implements the mandatory four-step pattern for CSS variables, enabling seamless dark mode and theming.
Error Prevention: Addresses 8 common errors, including incorrect configuration, missing mappings, and dark mode conflicts.
Use Case: Use this Skill when starting a new React project with Tailwind v4, or when encountering issues with colors, dark mode, or @apply directives in an existing setup.

Quick Start

Follow the steps in the commands/setup.md file to install Tailwind v4 and shadcn/ui.

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 CSS v4 with shadcn/ui in a Vite project?▼

Setting up Tailwind CSS v4 with shadcn/ui requires following an automated setup guide that configures a CSS-first approach using CSS variables. This process ensures proper Vite project integration by removing tailwind.config.ts for theme definitions.

Why does dark mode not work with Tailwind v4 and shadcn/ui?▼

Dark mode fails when the mandatory four-step pattern for CSS variables is not implemented correctly. This setup prevents dark mode conflicts by ensuring proper CSS variable mapping and using the correct architectural changes introduced in Tailwind v4.

Do I need tailwind.config.ts for theme definitions in Tailwind CSS v4?▼

No, you do not need tailwind.config.ts for theme definitions in Tailwind CSS v4. The architecture shifts to a CSS-first approach using the @theme inline directive and CSS variables to define themes instead of a JavaScript configuration file.

What are common configuration errors when using shadcn/ui with Tailwind v4?▼

Common configuration errors include incorrect setup, missing CSS variable mappings, and dark mode conflicts. This setup addresses eight specific errors to ensure adherence to Tailwind v4 architectural changes and prevent issues with @apply directives.

Can I use the @apply directive with CSS variables in Tailwind v4?▼

Yes, you can use the @apply directive, but issues often arise from missing CSS variable mappings. Proper configuration using the @theme inline directive ensures that @apply works seamlessly with your CSS variable architecture.

What is the @theme inline directive in Tailwind CSS v4?▼

The @theme inline directive is a core architectural feature in Tailwind CSS v4 used for defining themes. It replaces the traditional JavaScript configuration file, allowing developers to map CSS variables directly within the CSS file.