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.

About

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

Standardized shadcn/ui integration optimized for the v4 engine
Automated 4-step Tailwind v4 CSS variable architecture setup
Modern animation support using tw-animate-css integration
91 GitHub stars
Validation and cleanup of legacy v3 configuration files
Built-in automatic dark mode implementation with ThemeProvider

Use Cases

Initializing new React projects with Tailwind v4 and shadcn/ui components
Troubleshooting broken theme variables, dark mode issues, or Vite build errors
Migrating legacy Tailwind v3 projects to the high-performance v4 architecture

About

Key Features

Standardized shadcn/ui integration optimized for the v4 engine
Automated 4-step Tailwind v4 CSS variable architecture setup
Modern animation support using tw-animate-css integration
91 GitHub stars
Validation and cleanup of legacy v3 configuration files
Built-in automatic dark mode implementation with ThemeProvider

Use Cases

Initializing new React projects with Tailwind v4 and shadcn/ui components
Troubleshooting broken theme variables, dark mode issues, or Vite build errors
Migrating legacy Tailwind v3 projects to the high-performance v4 architecture