Can I use this with Vite projects?

Yes, the skill includes optimized configurations for @tailwindcss/vite and standardized path aliases to ensure a smooth development experience.

Why does it require deleting tailwind.config.ts?

Tailwind v4 moves configuration directly into the CSS file via the @theme directive, making the JavaScript config file obsolete and potentially problematic.

Is dark mode handled automatically?

Yes, the skill implements a CSS variable architecture where semantic colors update automatically when the .dark class is toggled on the root element.

What replaces tailwindcss-animate in v4?

The skill uses tw-animate-css, which is the recommended modern standard for animations in Tailwind v4 and shadcn/ui environments.

Does this skill support Tailwind v3?

No, this skill is specifically optimized for Tailwind v4 and helps developers migrate away from v3 legacy configurations for better performance.

Tailwind v4 & Shadcn/ui Architect

Name: Tailwind v4 & Shadcn/ui Architect
Author: jezweb

byjezweb

•

Design Tools

Implements high-performance Tailwind v4 and shadcn/ui production stacks using advanced CSS variable architecture.

This skill automates the complex setup and migration to Tailwind CSS v4 for shadcn/ui projects, enforcing a strict four-step architecture that ensures consistent dark mode, correct theme mapping, and high-performance Vite integration. It proactively prevents common v4 pitfalls such as CSS variable breakage, animation library conflicts, and legacy configuration overhead, providing a production-ready foundation for modern React applications using the latest industry standards.

Key Features

01Standardized shadcn/ui integration optimized for the v4 engine

02Automated 4-step Tailwind v4 CSS variable architecture setup

03Modern animation support using tw-animate-css integration

0491 GitHub stars

05Validation and cleanup of legacy v3 configuration files

06Built-in automatic dark mode implementation with ThemeProvider

Use Cases

01Initializing new React projects with Tailwind v4 and shadcn/ui components

02Troubleshooting broken theme variables, dark mode issues, or Vite build errors

03Migrating legacy Tailwind v3 projects to the high-performance v4 architecture

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