home/categories/frontend/asymmetric-al-core-agents-skills-tailwind-v4-shadcn-skill-md
frontenddevelopment

tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

Asymmetric-al
maintainer
Asymmetric-al
更新於 2/25/2026
星標
500
分支
9
quick start

Installation and usage

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

安裝
$ install --globalskills.sh
使用

安裝後,您可以通過在終端運行以下命令來使用此技能:

skills use tailwind-v4-shadcn