Tailwind v4 is CSS-first, and I like it

The change in Tailwind v4 that took the most adjusting to: there is no tailwind.config.js. You import Tailwind from CSS and declare your theme tokens right there, in an @theme block.

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
}

Those tokens become utilities automatically — --color-background gives you bg-background, text-background, and so on. Adding a color to the design system is now a one-line CSS edit rather than a round-trip through a JS config.

Dark mode stays in CSS too. I flip the custom properties in a media query and let every token-derived utility follow along:

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

Keeping the whole theme in one CSS file — tokens, variants, dark mode — means there's a single place to look when something's off. That's the part I didn't expect to like as much as I do.