Why do I need to delete my tailwind.config.ts file?

Tailwind v4 moves all configuration directly into your CSS files. Keeping the legacy JS/TS config file can cause build conflicts and unexpected behavior in v4 environments.

Does this skill support Tailwind v3?

While it provides guidance on migrating from v3, this skill is specifically optimized for Tailwind v4's new CSS-first configuration engine and @theme directives.

How does it handle dark mode implementation?

It uses a specific 4-step CSS variable mapping where colors are defined in HSL in the :root and .dark classes, then mapped to Tailwind colors using the @theme inline pattern.

What is the replacement for tailwindcss-animate?

For Tailwind v4 and shadcn/ui, this skill uses tw-animate-css, which resolves compatibility issues found in the older tailwindcss-animate plugin.

Is Vite required to use this skill?

The skill is highly optimized for the @tailwindcss/vite plugin, which is the recommended way to utilize the full performance benefits of Tailwind v4.

Tailwind v4 shadcn/ui Stack

Name: Tailwind v4 shadcn/ui Stack
Author: jezweb

byjezweb

•

117

Design Tools

Implements a production-grade Tailwind CSS v4 and shadcn/ui integration using a mandatory four-step CSS variable architecture.

About

This skill provides a standardized, production-tested workflow for integrating Tailwind CSS v4 with shadcn/ui components. It enforces a specific 'Four-Step Architecture' that ensures CSS variables are correctly defined, mapped to Tailwind utilities via the @theme inline pattern, and applied to the base layer for automatic dark mode support. Designed to eliminate common migration hurdles, it handles the transition from legacy tailwind.config.ts files to the new CSS-first engine while resolving frequent issues like animation library conflicts and HSL color wrapping errors.

Key Features

Automated migration path from Tailwind v3 to v4 syntax
Integrated dark mode support with automatic theme switching
117 GitHub stars
Standardized Tailwind v4 CSS variable architecture setup
Built-in fixes for tw-animate-css and color mapping errors
Zero-config shadcn/ui integration for Vite environments

Use Cases

Troubleshooting broken themes, dark mode toggles, or CSS variables
Initializing new React projects with Tailwind v4 and shadcn/ui
Migrating existing frontend stacks from Tailwind v3 to the v4 CSS engine

About

Key Features

Automated migration path from Tailwind v3 to v4 syntax
Integrated dark mode support with automatic theme switching
117 GitHub stars
Standardized Tailwind v4 CSS variable architecture setup
Built-in fixes for tw-animate-css and color mapping errors
Zero-config shadcn/ui integration for Vite environments

Use Cases

Troubleshooting broken themes, dark mode toggles, or CSS variables
Initializing new React projects with Tailwind v4 and shadcn/ui
Migrating existing frontend stacks from Tailwind v3 to the v4 CSS engine