Tailwind 4

This enforces Tailwind 4 best practices with a decision tree approach that keeps you from shooting yourself in the foot. The core rule: never use var() or hex colors in className attributes. Use Tailwind's semantic classes instead, reserve var() for library props that can't accept className (like Recharts), and only reach for the style prop when values are truly dynamic. It's opinionated about when to use the cn() utility versus plain className, which is honestly helpful since people tend to wrap everything unnecessarily. The pattern library covers the usual suspects like responsive design and dark mode, but the real value is in the constraint system that prevents the CSS-in-className antipatterns that creep into codebases.

skills.sh installs: 614
GitHub stars: 15.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add prowler-cloud/prowler --skill tailwind-4 --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind 4 Setup (CSS-first, no tailwind.config)

Config lives in CSS: ui/styles/globals.css starts with @import "tailwindcss"; plus @plugin, @source, @custom-variant, @theme, @utility.
PostCSS plugin is @tailwindcss/postcss (ui/postcss.config.js). There is no tailwind.config.*; do not create one.
Design tokens are declared in @theme (--color-bg-neutral-primary: ...) and become utilities (bg-bg-neutral-primary, text-text-neutral-secondary, border-border-neutral-secondary).
Dark mode is class-based: @custom-variant dark (&:where(.dark, .dark *)); (toggled by next-themes).
New utilities use @utility name { ... }, not @layer utilities + @apply hacks.

Prowler UI: use the semantic token utilities above. Raw palette classes (bg-slate-800, bg-blue-500) appear below only as generic Tailwind examples; in ui/ they are not allowed (see prowler-ui Design System Discipline).