Tailwind CSS v4

Tailwind v4 is a complete rewrite of v3. The config is now CSS-native - no tailwind.config.js, no PostCSS config file.

---

Setup

Install:

npm install @tailwindcss/vite tailwindcss
npm install -D @tailwindcss/typography

astro.config.mjs:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: { plugins: [tailwindcss()] },
});

src/styles/global.css:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-brand-500: #22c55e;
  /* ... rest of scale */
}

Import this in Layout.astro:

---
import "../styles/global.css";
---

---

@theme - brand colors

Define custom design tokens in @theme. They become Tailwind utility classes automatically:

@theme {
  --color-brand-50:  #f0fdf4;
  --color-brand-100: #dcfce7;
  --color-brand-200: #bbf7d0;
  --color-brand-300: #86efac;
  --color-brand-400: #4ade80;
  --color-brand-500: #22c55e;  /* primary brand color */
  --color-brand-600: #16a34a;
  --color-brand-700: #15803d;
  --color-brand-800: #166534;
  --color-brand-900: #14532d;
  --color-brand-950: #052e16;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
}

This makes classes like bg-brand-500, text-brand-400, border-brand-700 available everywhere.

To generate a new color scale from a single hex, use uicolors.app.

---

Fonts

Install from @fontsource (self-hosted, no external network call):

npm install @fontsource/inter @fontsource/plus-jakarta-sans

Import only the weights you use in global.css:

@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/plus-jakarta-sans/600.css";
@import "@fontsource/plus-jakarta-sans/700.css";
@import "@fontsource/plus-jakarta-sans/800.css";

Then reference them in @theme:

--font-sans: "Inter", system-ui, sans-serif;
--font-display: "Plus Jakarta Sans", "Inter", sans-serif;

Use font-display on headings (font-display class) and font-sans on body text (default).

---

Differences from Tailwind v3

v3	v4
tailwind.config.js	@theme {} in CSS
theme.extend.colors	--color-* CSS vars in @theme
PostCSS config	Vite plugin (@tailwindcss/vite)
@tailwind base/components/utilities	@import "tailwindcss"
JIT mode separate	Always on

---

Typography plugin

@tailwindcss/typography adds the prose class for rendering markdown/blog content:

<article class="prose prose-invert max-w-none">
  <!-- markdown rendered content -->
</article>

prose-invert inverts colors for dark backgrounds.