tailwind-4

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).

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