Tailwind CSS v4 mit Nuxt nutzen

Tailwind CSS v4 ist da und bringt viele Verbesserungen gegenüber v3. Neben einer grundlegend überarbeiteten Konfiguration und besserer Performance gibt es ein neues Plugin-System. Hier zeige ich dir, wie du es mit Nuxt kombinierst.

Installation

In einem bestehenden Nuxt-Projekt installierst du Tailwind v4 über npm. Da @nuxt/ui v4 bereits Tailwind v4 mitbringt, entfällt in vielen Fällen die manuelle Installation:

npm install tailwindcss @tailwindcss/vite

In der nuxt.config.ts bindest du das Vite-Plugin ein:

export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()]
  }
})

Alternativ – und das ist der empfohlene Weg mit @nuxt/ui v4 – importierst du Tailwind über die CSS-Datei:

@import "tailwindcss";
@import "@nuxt/ui";

CSS-First Konfiguration

Anders als in v3 wird die Konfiguration jetzt direkt in CSS-Dateien gesteuert. Der tailwind.config.js entfällt komplett. Stattdessen verwendest du die @theme-Direktive:

@theme {
  --color-primary: oklch(0.55 0.2 150);
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --radius-box: 0.75rem;
}

Das hat mehrere Vorteile:

• Ein zentraler Ort: Design-Tokens und Styling in einer Datei
• Kein JS-Build-Schritt: Die Konfiguration wird direkt vom CSS-Parser verstanden
• Bessere IDE-Unterstützung: Autovervollständigung für Theme-Variablen

@theme Direktive

Die @theme-Direktive definiert dein Design-System. Im Gegensatz zu Tailwind v3, wo die Konfiguration in JavaScript erfolgte, arbeitest du jetzt rein in CSS:

@theme {
  --color-brand: #00DC82;
  --color-brand-dark: #00A155;
  --font-mono: 'JetBrains Mono', monospace;
  --spacing-page: 2rem;
}

Die Variablen sind dann sowohl in deinem CSS als auch in Tailwind-Klassen nutzbar:

<div class="bg-brand text-white p-page">
  Mit Tailwind v4
</div>

Plugin-System

Plugins werden in Tailwind v4 ebenfalls über CSS eingebunden:

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Das mag auf den ersten Blick ungewohnt wirken, macht aber das Build-System einfacher und schneller. Jedes Plugin registriert sich selbstständig und fügt seine Utilities und Theme-Werte hinzu.

Performance

Tailwind v4 generiert nur noch das CSS, das du tatsächlich nutzt – und das schneller als je zuvor. Der neue Parser arbeitet streaming-basiert und muss nicht mehr das gesamte Projekt scannen, bevor der erste CSS-Token ausgegeben wird.

In der Praxis bedeutet das:

• Kleinere Bundles: Kein ungenutztes CSS mehr – auch ohne PurgeCSS
• Schnellere Builds: Bis zu 10x schneller als v3 bei großen Projekten
• Bessere DX: HMR-Updates sind gefühlt sofort da

Integration mit @nuxt/ui v4

Wenn du @nuxt/ui v4 verwendest, ist Tailwind v4 bereits integriert. Du musst nur noch deine Theme-Variablen in der main.css definieren:

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
}

Das static-Keyword verhindert dabei, dass deine Theme-Werte durch die Standardwerte von @nuxt/ui überschrieben werden.