Tailwind v4

Eidos ships a Tailwind v4 theme generated from the same tokens, so utilities and components draw from one source. In your CSS entry point:

@import "tailwindcss";
@import "@kairosis/eidos/styles.css"; /* tokens + component styles */
@import "@kairosis/eidos/tailwind.css"; /* maps the tokens into Tailwind's theme */

Order matters

styles.css (or tokens.css) is required. The theme references the Eidos custom properties rather than duplicating their values, so without them the utilities resolve to nothing.

Tokens then reach you as ordinary utilities:

<div className="bg-bg-surface text-text-muted border-border rounded-md p-4 shadow-md">
  <span className="text-primary font-mono text-xs tracking-mono-label">LAST RUN</span>
  <Button icon="plus">Create project</Button>
</div>

What maps to what

Tokens	Utilities
Colours — --primary, --bg-surface, --text-muted, --tag-1…8	bg-primary, bg-bg-surface, text-text-muted, bg-tag-3
Radii, type, leading, tracking, easing	rounded-md, text-lg, font-mono, leading-tight, tracking-mono-label, ease-out
Shadows and focus rings	shadow-md, shadow-focus
Durations	duration-fast, duration-base, duration-slow

Theme-aware by construction

Colour and shadow utilities are emitted as var() references, so bg-bg-surface follows data-theme="light" at runtime instead of freezing the dark value. Everything else is theme-invariant and inlined as a literal — rounded-md compiles to a flat 8px.

What isn't remapped, and why

Spacing. Tailwind's default 4px scale is already the Eidos grid, so p-4 is 16px either way. Remapping it would add conflict for zero gain.

Font weights. 400/500/600/700 already match, so font-medium is already 500.