# Tailwind CSS

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/tailwind · Updated 2026-10-14
Use when: Writing UI with Tailwind CSS (v3 or v4).
Rules that always apply: https://identity.north.ae/AGENTS

## Install
- v4: `@import "tailwindcss"; @import "./north-tokens.css"; @import "./north-tailwind.css";` — files: `/assets/tokens/north-tailwind.css`, `/assets/tokens/north-tokens.css`. The default Tailwind palette is removed (`--color-*: initial`); `dark:` follows OS preference and `data-theme="dark"`; spacing base 4px.
- v3: `presets: [require('./tailwind.preset.cjs')]` (`/assets/tokens/tailwind.preset.cjs`) and load north-tokens.css globally. Same class names. Opacity modifiers don't work on semantic (CSS-variable) colours in v3; use primitives (`bg-gulf-70/20`).

## Classes
- Semantic (switch light/dark): bg-n-canvas, bg-n-subtle, bg-n-panel, bg-n-surface-raised, bg-n-inverse, text-n-heading, text-n-body, text-n-caption, text-n-strong, text-n-link, bg-n-action, hover:bg-n-action-hover, text-n-on-action, text-n-on-danger, bg-n-accent, border-n-border, border-n-border-ui, outline-n-focus, bg-n-status-{success,warning,danger,info}[-bg], bg-n-skeleton-base, bg-n-scrim, bg-n-table-header, bg-n-row-hover, bg-n-row-selected, n-diagram-*.
- Palette: midnight-05…95, dune-02…95, dawn-05…80, oasis-05…85, gulf-05…90, steel-05…90, status-*, snow, white, black, dataviz-1…6.
- Fonts: font-display, font-text (= font-sans), font-arabic, font-mono. Text styles (size + leading + tracking + weight): text-display-xl, text-display-lg, text-heading-1…4, text-lead, text-body-lg, text-body, text-body-sm, text-caption, text-microtitle, text-code.
- rounded-xs/sm/md/lg/xl/2xl/full · shadow-1…4, shadow-glow · sm:640 md:960 lg:1280 xl:1600 · ease-standard/enter/exit/rise · duration-instant/fast/base/slow/deliberate · animate-shimmer/dot/glow/rise/indeterminate/skel-pulse · h-control-sm/md/lg · min-h-touch · max-w-measure · max-w-content · blur-*/backdrop-blur-{scrim,sm,md} · opacity-disabled/muted · z-raised/sticky/overlay/modal/toast · bg-aurora/horizon/night.

## Recipes
- Primary button: `inline-flex items-center gap-2 h-control-md px-4 rounded-sm bg-n-action text-n-on-action font-medium hover:bg-n-action-hover active:translate-y-px focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-n-focus disabled:opacity-disabled disabled:pointer-events-none`
- Secondary button: `inline-flex items-center gap-2 h-control-md px-4 rounded-sm border border-n-border-ui bg-n-surface-raised text-n-heading font-medium hover:border-n-caption`
- Input: `h-control-md w-full px-3 rounded-sm border border-n-border-ui bg-n-surface-raised text-n-heading placeholder:text-steel-50 focus:outline-none focus:border-n-focus focus:ring-3 focus:ring-n-focus/20 aria-invalid:border-status-danger disabled:bg-n-panel`
- Card: `rounded-lg border border-n-border bg-n-surface-raised p-6` · Badge success: `inline-flex items-center h-[22px] px-2 rounded-xs text-[11.5px] font-bold bg-n-status-success-bg text-n-status-success`
- Table header: `sticky top-0 bg-n-table-header px-4 py-3 text-left text-xs font-semibold tracking-wide text-n-caption whitespace-nowrap border-b border-n-border-ui` · number cell: `px-4 py-3 text-right tabular-nums border-b border-n-border-ui`
- Toast: `grid grid-cols-[20px_1fr_auto] items-center gap-3 rounded-md bg-midnight-90 text-snow px-4 py-3 shadow-3 text-sm` · Spinner: `size-5 rounded-full border-2 border-current/20 border-t-current animate-spin text-n-link` · Skeleton: `block h-3 rounded-[6px] bg-n-skeleton-base animate-skel-pulse` · Scrim: `fixed inset-0 bg-n-scrim backdrop-blur-scrim z-overlay`

## Rules
- No arbitrary colour values (bg-[#…]); no off-scale spacing for brand values; semantic classes in components, primitives only in brand artwork; focus-visible on every interactive element; motion-reduce:animate-none for decorative animation; logical utilities (ps/pe/ms/me/start/end/text-start) for RTL.