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.

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

01Automated migration path from Tailwind v3 to v4 syntax

02Integrated dark mode support with automatic theme switching

03117 GitHub stars

04Standardized Tailwind v4 CSS variable architecture setup

05Built-in fixes for tw-animate-css and color mapping errors

06Zero-config shadcn/ui integration for Vite environments

Use Cases

01Troubleshooting broken themes, dark mode toggles, or CSS variables

02Initializing new React projects with Tailwind v4 and shadcn/ui

03Migrating existing frontend stacks from Tailwind v3 to the v4 CSS engine

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills tailwind-v4-shadcn

For use in Claude.ai and ChatGPT

Download Skill