前端开发

tailwind-4

Name: tailwind-4
Author: prowler-cloud

prowler-cloud/prowler

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).

612 次安装
1.5万星标
收录于 2026.01.20

安装命令

$ npx skills add https://github.com/prowler-cloud/prowler --skill tailwind-4

SKILL.md

Styling Decision Tree

Tailwind class exists?  → className="..."
Dynamic value?          → style={{ width: `${x}%` }}
Conditional styles?     → cn("base", condition && "variant")
Static only?            → className="..." (no cn() needed)
Library can't use class?→ style prop with var() constants

Critical Rules

Never Use var() in className

// ❌ NEVER: var() in className
<div className="bg-[var(--color-primary)]" />
<div className="text-[var(--text-color)]" />

SKILL.md

Styling Decision Tree

Critical Rules

Never Use var() in className

相关 Skills