Children working around a laptop in a busy classroom.

Tailwind CSS v4

T Richardson

May 5, 2025

81 words · Less than 1 minute

This site uses Tailwind CSS v4 with the CSS-first configuration approach. The main stylesheet at src/styles/main.css imports Tailwind with @import "tailwindcss".

Tailwind v4 uses @tailwindcss/vite as a Vite plugin instead of the older @astrojs/tailwind integration. Configuration happens in CSS using @layer theme rather than a JavaScript config file.

Key differences from Tailwind v3:

  • No tailwind.config.js file needed
  • Use @import "tailwindcss" instead of @tailwind directives
  • Configuration via CSS custom properties
  • Automatic content detection (no content paths)
  • Dynamic spacing and grid values without extending config

Recent Posts