Tailwind v4 Nextjs 16 Setup: Config, Fonts und 5 Fixes

Du willst Tailwind v4 in einer Next.js-16-App, und die Anleitungen widersprechen sich: Die eine sagt postcss.config.mjs, ein frisches create-next-app schreibt etwas anderes, und deine alte tailwind.config.js bewirkt gar nichts. Diese Anleitung zu Tailwind v4 Nextjs richtet alles von Grund auf ein, erklärt jede Zeile, bindet next/font ins Theme ein und behebt die fünf Fehler, die meist hinter einem „Tailwind v4 funktioniert nicht“ stecken.

Was wir am 6. November 2026 geprüft haben: die Templates in create-next-app 16.4.5 (veröffentlicht am 3. November), die Doku von Next.js 16, die in node_modules/next/dist/docs mitkommt, den Next.js-Guide von Tailwind selbst und das CSS, das Tailwind 4.3.3 für jedes Snippet unten erzeugt. Diese Website, wingo-ui.com, läuft auf Next.js 16.3 mit Tailwind 4.3.3 und dem PostCSS-Plugin.

Was braucht ein Setup von Tailwind v4 in Next.js 16?

Vier Dinge, weniger als bei v3. Für ein komplettes Setup von Tailwind v4 Nextjs 16 brauchst du:

• zwei Dev-Dependencies: tailwindcss und eine Integration für den Bundler (@tailwindcss/postcss oder @tailwindcss/turbopack),
• einen Eintrag in der Config, der die Integration registriert,
• @import "tailwindcss"; ganz oben in app/globals.css,
• import "./globals.css" in app/layout.tsx.

Was wegfällt: tailwind.config.js, das content-Array, die drei @tailwind-Direktiven, autoprefixer und postcss-import. Tailwind v4 findet deine Klassennamen, indem es das Projekt durchsucht (node_modules und alles aus .gitignore lässt es aus), ergänzt Vendor-Präfixe selbst und liest das Theme aus dem CSS.

Wie installiere ich Tailwind v4 in Next.js?

Bei einer neuen App lässt du create-next-app das Setup schreiben. Eine bestehende App braucht mit dem PostCSS-Plugin vier kleine Änderungen.

Neue App: create-next-app schreibt es für dich

npx create-next-app@latest my-app --yes
cd my-app

--yes übernimmt deine gespeicherten Einstellungen oder die Standardwerte, und dazu gehören TypeScript, ESLint, der App Router, der Alias @/* und Tailwind. Seit Version 16.4.0 (6. Oktober 2026) sieht der Tailwind-Teil anders aus. Wir haben die Templates von 16.4.5 gelesen: Ist Turbopack der Bundler (der Standard), installiert die CLI @tailwindcss/turbopack statt @tailwindcss/postcss, lässt postcss.config.mjs weg und schreibt eine Loader-Regel in next.config.ts:

// next.config.ts: die Regel, die create-next-app 16.4.5 ergänzt (die übrigen Standardoptionen weggelassen)
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

Diese Regel ist Turbopack-Konfiguration, ein webpack-Build (next dev --webpack) liest sie also nie. Wenn du webpack für ein Plugin brauchst, nimm stattdessen den PostCSS-Weg unten. Version 16.3.6 und älter haben noch postcss.config.mjs geschrieben. Deshalb zeigen Tutorials aus diesem Sommer eine andere Datei als die, die deine neue App hat.

Bestehende App: Tailwind v4 installieren über PostCSS

Diesen Weg dokumentieren sowohl die CSS-Doku von Next.js als auch der Next.js-Guide von Tailwind, und er funktioniert unter Turbopack und webpack.

npm install -D tailwindcss @tailwindcss/postcss

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

/* app/globals.css */
@import "tailwindcss";

// app/layout.tsx
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Starte npm run dev, setz className="text-3xl font-bold" auf eine Überschrift, und sie sollte groß und fett erscheinen. Mehr braucht es nicht, um Tailwind v4 in Next.js 16 zu installieren. Nutze eine Integration, nicht beide: entweder postcss.config.mjs oder die Loader-Regel für Turbopack.

Wo steht die Tailwind v4 Config in Next.js?

In app/globals.css, direkt nach dem Import. Die Tailwind v4 Config ist CSS: Jede Variable in einem @theme-Block wird zugleich zu einer CSS-Variable und zu einer Reihe von Utilities.

@import "tailwindcss";

@theme {
  --color-brand: #d63f00;
  --radius-card: 1.25rem;
  --breakpoint-3xl: 120rem;
}

Damit hast du bg-brand, text-brand, rounded-card und einen Breakpoint 3xl:. Der Namespace der Variable entscheidet, welche Utilities sie speist: --color-* für Farben, --font-* für Schriftfamilien, --radius-*, --shadow-*, --breakpoint-* und so weiter.

Werte, die sich zwischen Light und Dark ändern, gehören in normale CSS-Variablen, die du mit @theme inline zuordnest:

:root {
  --surface: #ffffff;
  --surface-foreground: #1f1f1f;
}

.dark {
  --surface: #1b1b1f;
  --surface-foreground: #ededed;
}

@theme inline {
  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
}

Mit inline schreibt Tailwind die Referenz direkt in die Utility, bg-surface wird also zu background-color: var(--surface) und folgt dem nächsten .dark. Ohne inline zeigt die Utility auf --color-surface, und das wird dort aufgelöst, wo es deklariert ist, auf :root. Das klappt noch, solange .dark auf <html> sitzt, wo next-themes es setzt. Ein .dark-Abschnitt weiter unten auf der Seite behält aber den hellen Wert. Der Pillar-Artikel zu Tailwind v4 Design Tokens geht ein komplettes Token-Set durch: Surfaces, Textstufen, Tones, Elevation und einen Kontrast-Check.

Wie nutze ich next/font mit Tailwind v4?

next/font stellt jede Schrift als CSS-Variable bereit, und @theme inline macht aus dieser Variable font-sans oder font-mono. Das Layout setzt die Variablen auf <html>:

// app/layout.tsx
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <body>{children}</body>
    </html>
  );
}

@theme inline {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

Nimm hier inline, so wie die Font-Doku von Next.js. Eine Referenz in einem normalen @theme wird auf :root aufgelöst, und das klappt nur, solange die Font-Klassen auf <html> sitzen. Verschiebst du sie auf <body>, fällt font-sans ohne Warnung auf die Systemschrift zurück; mit inline funktioniert es auf beiden Elementen.

Die Basis-Styles von Tailwind setzen die Schrift von html auf --font-sans, die ganze Seite bekommt Geist also ohne eine einzige Klasse. Einen Haken hat der Starter von 16.4.5: Seine globals.css endet mit body { font-family: Arial, Helvetica, sans-serif; }. Die Demo-Seite verdeckt das, weil sie font-sans auf ihr Wrapper-Div setzt. Ersetzt du page.tsx durch dein eigenes Markup, erscheint alles in Arial. Lösch diese Zeile. font-sans auf <body> hilft nicht, aus dem Grund, den Fehler 3 unten erklärt.

Warum funktioniert Tailwind v4 in Next.js nicht?

Meist liegt es an einem von fünf Fehlern im Setup, jeder mit einer Meldung oder einem Symptom, das du wiedererkennst.

1. "It looks like you're trying to use tailwindcss directly as a PostCSS plugin"

In deiner postcss.config.mjs steht noch tailwindcss: {}. In v4 ist das PostCSS-Plugin in ein eigenes Paket umgezogen. Installier @tailwindcss/postcss, ersetz den Schlüssel und wirf bei der Gelegenheit autoprefixer raus.

2. Änderungen an tailwind.config.js bewirken nichts

v4 sucht nicht nach einer Config-Datei. Verschieb theme.extend nach @theme, darkMode nach @custom-variant (Fehler 4) und Plugins in Zeilen wie @plugin "plugin-name";. Für einen schrittweisen Umzug kannst du die alte Datei mit @config "../tailwind.config.js"; unter dem Import laden. Dieselbe Änderung erklärt, warum npx tailwindcss init scheitert: Das Paket tailwindcss bringt kein Kommandozeilen-Tool mehr mit. Du migrierst ein shadcn-Projekt? Der Guide zur Migration von shadcn auf Tailwind v4 erklärt den Codemod und was er übersieht.

3. Manche Klassen fehlen oder verlieren gegen anderes CSS

Öffne die DevTools auf dem Element. Hat die Klasse gar keine Regel, hat Tailwind sie nie gesehen:

• Dateien außerhalb des Projekt-Roots. In einem Monorepo werden Komponenten in packages/ui von apps/web aus nicht durchsucht. Ergänz @source "../../../packages/ui/src"; in apps/web/app/globals.css (der Pfad ist relativ zur CSS-Datei).
• Klassennamen, die erst zur Laufzeit entstehen. `bg-${tone}-500` steht nirgends als Text, wird also nie erzeugt. Schreib die vollen Namen in eine Map, { danger: "bg-red-500", success: "bg-green-500" }.
• @apply in einem CSS-Modul. Eine .module.css-Datei wird für sich allein kompiliert und scheitert mit „Cannot apply unknown utility class“. Setz @reference "../globals.css"; (den Pfad vom Modul zu deinem Stylesheet) ganz oben ins Modul.

Existiert die Regel, ist aber durchgestrichen, sind Cascade Layers die Ursache. v4 legt Utilities in @layer utilities, und jede Regel außerhalb eines Layers schlägt jede Regel in einem Layer, egal wie spezifisch. Genau deshalb gewinnt das body { font-family: Arial } des Starters ohne Layer gegen font-sans auf demselben Element. Pack deine eigenen globalen Regeln in @layer base { ... }, dann gewinnen die Utilities wieder.

4. dark:-Klassen ignorieren den Theme-Toggle

Standardmäßig wird dark: zu @media (prefers-color-scheme: dark), folgt also dem Betriebssystem und ignoriert die Klasse, die next-themes setzt. Eine Zeile reicht:

@custom-variant dark (&:where(.dark, .dark *));

Dann übergib attribute="class" an den ThemeProvider von next-themes und lösch den Block @media (prefers-color-scheme: dark) aus dem Starter, sonst überstimmt die Systemeinstellung weiter deinen Toggle. Der Guide zum Tailwind v4 Dark Mode behandelt Tokens und den Toggle, der Artikel zum next-themes Hydration Error das Aufflackern beim Neuladen.

5. Neue Klassen erscheinen erst nach einem Neustart

Du ergänzt eine Klasse, speicherst, und nichts ändert sich, bis du next dev neu startest. Eine Diskussion im Tailwind-Repo vom 4. Mai 2026 (opens in a new tab) beschreibt genau das unter Next.js 16. Seit Next.js 16.1 legt Turbopack seinen Dev-Cache außerdem auf der Festplatte in .next/dev/cache/turbopack ab und nutzt ihn beim Neustart wieder, ein veraltetes Ergebnis kann einen Neustart also überleben. Diese Reihenfolge funktioniert bei uns:

1. Beende den Dev-Server und lösch den Cache: rm -rf .next.
2. Prüf, dass nur eine Integration läuft (keine PostCSS-Config neben einer Loader-Regel für Turbopack).
3. Um den Bundler auszuschließen, starte next dev --webpack mit dem PostCSS-Setup. Verschwindet das Problem, ist es ein Turbopack-Bug, den du mit einer Reproduktion melden solltest.

Wie ergänze ich Komponenten auf Basis dieses Setups?

Eine Komponentenbibliothek für Tailwind v4 braucht nur, dass die Tokens, die sie nutzt, in deinem @theme existieren. Der Init-Befehl von Wingo UI führt sie mit deiner app/globals.css zusammen und ergänzt den Helper cn:

npx wingo-ui@latest init
npx wingo-ui@latest add button card ui-config

Button, Card und UIProvider sind kostenlos. Sie nutzen die semantischen Tokens aus den Abschnitten oben (bg-surface, shadow-raised, text-muted-foreground) und wechseln deshalb mit deiner .dark-Klasse, ohne ein einziges dark:-Präfix. Eine Server-Seite kann sie direkt rendern:

// app/page.tsx
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export default function Page() {
  return (
    <main className="mx-auto max-w-md p-6">
      <Card
        title="Tailwind v4 läuft"
        description="Tokens aus globals.css, Schriften aus next/font, Komponenten aus Wingo UI."
        footer={<Button tone="brand">Weiter</Button>}
      />
    </main>
  );
}

Gemeinsame Standardwerte gehören ins Root-Layout, dann bekommt jeder Button in der App dieselbe Form, ohne dass du Props wiederholst. UIProvider ist eine Client-Komponente; ein Server-Layout kann sie rendern und einfache Objekte übergeben:

// app/layout.tsx (innerhalb von <body>)
import { UIProvider } from "@/lib/ui-config";

<UIProvider defaults={{ button: { radius: "full", size: "lg" } }}>{children}</UIProvider>

Der Guide zum Setup einer Next.js-Komponentenbibliothek geht init, "use client"-Grenzen und Updates im Detail durch, und die Theming-Doku listet jedes Token. Weitere Artikel zu diesem Stack findest du unter Next.js und Tailwind CSS.

Wie sehen die fertigen Dateien aus?

Bei einer bestehenden App auf dem PostCSS-Weg steckt das ganze Setup in drei Dateien:

// postcss.config.mjs
const config = { plugins: { "@tailwindcss/postcss": {} } };
export default config;

/* app/globals.css */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  --background: #ffffff;
  --foreground: #1f1f1f;
  --surface: #ffffff;
}

.dark {
  --background: #111113;
  --foreground: #ededed;
  --surface: #1b1b1f;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
  }
}

Das Layout ist die next/font-Version von oben. Auf dem Weg über create-next-app ersetzt du postcss.config.mjs durch den Eintrag turbopack.rules in next.config.ts; globals.css und das Layout bleiben gleich.

Nächster Schritt

Wenn das Setup läuft und du Komponenten willst, die diese Tokens schon nutzen, installiert npx wingo-ui@latest add button card beide kostenlosen Komponenten aus diesem Artikel, mit UIProvider als Abhängigkeit, und braucht kein Konto. Alle 75 kostenlosen Items installierst du genauso, und die Installations-Doku behandelt Vite und bestehende Projekte.

Häufige Fragen

Braucht Tailwind v4 in Next.js eine tailwind.config.js?

Nein. Tailwind v4 liest seine Konfiguration aus dem CSS: Theme-Werte kommen in @theme-Blöcke in app/globals.css, und die Quelldateien werden ohne content-Array erkannt. Eine Config-Datei aus v3 wird ignoriert, außer du lädst sie im Stylesheet mit @config "../tailwind.config.js";.

Soll ich @tailwindcss/postcss oder @tailwindcss/turbopack nehmen?

Beide erzeugen unter Turbopack, dem Standard-Bundler von Next.js 16, dasselbe CSS. create-next-app ab 16.4 schreibt den Turbopack-Loader; die Doku von Tailwind und Next.js zeigt weiterhin das PostCSS-Plugin, das auch mit next dev --webpack funktioniert. Nimm eins von beiden, nicht beide.

Warum werden meine Tailwind-Klassen in Next.js nicht angewendet?

Prüf vier Dinge in dieser Reihenfolge: Die Klasse steht im erzeugten CSS (DevTools), die Datei liegt in den erkannten Quellen (für Pakete im Monorepo @source ergänzen), der Klassenname ist voll ausgeschrieben (kein bg-${color}-500), und keine Regel ohne Layer in einem anderen Stylesheet überschreibt sie.

Brauche ich mit Tailwind v4 noch autoprefixer?

Nein. Tailwind v4 ergänzt Vendor-Präfixe und verarbeitet @import selbst, die PostCSS-Config braucht also nur @tailwindcss/postcss. Entferne autoprefixer und postcss-import aus älteren Configs.

Welche Browser unterstützt Tailwind v4?

Die Kompatibilitätsseite von Tailwind nennt Chrome 111, Safari 16.4 und Firefox 128 als Minimum, weil v4 auf Cascade Layers, @property und color-mix() setzt. Wenn du ältere Browser unterstützen musst, bleib bei Tailwind v3.4.