Tailwind CSS v4 setup in Astro

How utility-first styling integrates with this Astro build, theme tokens, and component classes like text-link.

This site uses Tailwind utility classes across cards, buttons, and about prose—including the text-link class referenced throughout expanded guides. Tailwind v4 shifts much configuration into CSS @theme blocks instead of JavaScript config files, which affects how custom colors align with brand plum and terracotta accents in diagrams and UI chrome.

Astro page components importing Tailwind v4 CSS with theme token blocks
Tailwind v4 integrates via CSS imports and @theme tokens shared across Astro layouts.

Project integration

Global styles load from the layout entry CSS; components use utilities directly in Astro HTML. Islands hydrate with the same tokens when they mount—see Astro islands.

About prose conventions

  • card — section containers on about pages.
  • text-link — internal /about/ links in generated HTML blocks.
  • about-figure — illustration wrappers in Astro applications expanded pages.

Build pipeline

Production builds run through the same Vite pipeline deployed via Cloudflare Workers. Env-specific asset hashing does not affect Tailwind class names—safe for static expanded content generation.