Tailwind v4 + shadcn/ui Stack FAQs

Question 1

Is tailwind.config.ts still required with this setup?

Accepted Answer

No, Tailwind v4 moves configuration into CSS. This skill helps you transition your theme settings to the @theme inline pattern and safely remove legacy configuration files.

Question 2

Why use this skill instead of standard Tailwind documentation?

Accepted Answer

This skill specifically handles the complex integration between Tailwind v4's new engine and shadcn/ui components, resolving specific conflicts like animation import errors and layer nesting that general docs often overlook.

Question 3

Does this work with Bun and PNPM?

Accepted Answer

Yes, it supports all major package managers, though it specifically recommends pnpm for shadcn initialization due to known compatibility issues with bunx.

Question 4

How does it improve dark mode implementation?

Accepted Answer

It uses a root-level CSS variable architecture with hsl() wrappers, allowing for automatic theme switching without needing to manually apply 'dark:' variants to every component.

Question 5

What common errors does this skill prevent?

Accepted Answer

It prevents 'tw-animate-css' import errors, duplicate @layer base blocks created by shadcn init, and incorrect plugin syntax for typography or forms.

Tailwind v4 + shadcn/ui Stack

Key Features

Use Cases

Tailwind v4 + shadcn/ui Stack

Key Features

Use Cases