tailwind-4
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).
By prowler-cloud · 599 installs
npx skills add prowler-cloud/prowler --skill tailwind-4
Source repository · Upstream listing
Styling Decision Tree
Critical Rules
Never Use var() in className
Never Use Hex Colors
The cn() Utility
When to Use cn()
When NOT to Use cn()
Style Constants for Charts/Libraries
When libraries don't accept className (like Recharts):
Dynamic Values
Common Patterns
Flexbox
Grid
Spacing
Typography
Borders & Shadows
States
Responsive
Dark Mode
Arbitrary Values (Escape Hatch)