TIL 20 June 2025

Migrating this blog from Tailwind v3 to v4

Moved this blog from Tailwind v3 to v4. The big change is that configuration left tailwind.config.js and went into the CSS itself, using @theme.

The three directives I was used to:

@tailwind base;
@tailwind components;
@tailwind utilities;

are now just one line:

@import "tailwindcss";

I moved the Catppuccin Mocha colors into @theme variables right in the stylesheet:

@theme {
  --color-base: #1e1e2e;
  --color-text: #cdd6f4;
  --color-mauve: #cba6f7;
}

Took me a bit to unlearn the JS config habit. My fingers kept reaching for tailwind.config.js to add a color, and it was not there anymore. Once it clicked, having the theme live next to the CSS felt cleaner.