Tailwind v4 CSS-first: what I broke, then fixed

TL;DR CSS-first means less `tailwind.config.js`, more discipline in `app.css`. Broken `@apply` fails loudly.

18 Feb 2025 · Albert Nicolas

tailwind
vite
css
frontend

1 min read Reading 0%

Key takeaways

Tailwind v4 (Jan 2025): official Vite plugin, CSS-first config.
Migrate custom colors to `@theme` before touching markup.
Rebuild + hard refresh: Vite cache often lies after a major bump.

Tailwind CSS v4 shipped in January 2025. On the portfolio I had a bloated tailwind.config.js (tokens, fonts, plugins). CSS-first forced a cleanup.

Before / after

Before:

// tailwind.config.js
export default {
  content: ['./resources/**/*.blade.php', './resources/js/**/*.js'],
  theme: { extend: { colors: { accent: '#2de2c5' } } },
}

After (v4 mindset):

@import "tailwindcss";

@theme {
  --color-accent: #2de2c5;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
}

What actually broke for me

@apply on classes that no longer exist as-is
Custom utilities defined only in the JS config
Dark mode: I had wired it poorly; v4 made that obvious

Client sites

Vannalec and the portfolio share the same front philosophy (Vite + Tailwind 4). When I fix a token bug on one, I check the other. Less drift means fewer “works on my machine” moments.

Me contacter

← Back to journal