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

Critical Rules

Never Use var() in className

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

// ✅ ALWAYS: Use theme token utilities
<div className="bg-button-primary" />
<div className="text-text-neutral-secondary" />

Tailwind 4 also accepts the bg-(--token) shorthand for CSS variables; it is still an escape hatch. If a token is used repeatedly, it belongs in @theme.

Never Use Hex Colors

// ❌ NEVER: Hex colors in className
<p className="text-[#ffffff]" />
<div className="bg-[#1e293b]" />

// ✅ ALWAYS: Use theme color utilities
<p className="text-text-neutral-primary" />
<div className="bg-bg-neutral-secondary" />