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

> So richtest du Tailwind v4 Nextjs 16 ein: PostCSS-Plugin oder neuer Turbopack-Loader, @theme-Tokens im CSS, next/font-Variablen und Fixes für fünf Fehler.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Next.js und Tailwind CSS](https://wingo-ui.com/de/blog/category/nextjs-tailwind)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/tailwind-v4-nextjs
- Englische Fassung: https://wingo-ui.com/blog/tailwind-v4-nextjs

## Kurz gesagt

Tailwind v4 braucht in Next.js 16 zwei Pakete (tailwindcss und @tailwindcss/postcss), eine postcss.config.mjs mit dem Plugin, @import "tailwindcss"; ganz oben in app/globals.css und diese Datei einmal im Root-Layout importiert. Es gibt keine tailwind.config.js und kein content-Array mehr: Theme-Werte stehen in @theme-Blöcken im CSS, und next/font-Variablen bindest du über @theme inline ein. Seit create-next-app 16.4.0 (6. Oktober 2026) bekommt eine neue App statt PostCSS den Loader @tailwindcss/turbopack in next.config.ts: Beides funktioniert unter Turbopack, nur PostCSS läuft auch mit webpack.

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

```bash
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`:

```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.

```bash
npm install -D tailwindcss @tailwindcss/postcss
```

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

export default config;
```

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

```tsx
// 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.

```css
@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:

```css
: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](https://wingo-ui.com/de/blog/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>`:

```tsx
// 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>
  );
}
```

```css
@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](https://wingo-ui.com/de/blog/shadcn-tailwind-v4-migration) 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:

```css
@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](https://wingo-ui.com/de/blog/tailwind-v4-dark-mode) behandelt Tokens und den Toggle, der [Artikel zum next-themes Hydration Error](https://wingo-ui.com/de/blog/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](https://github.com/tailwindlabs/tailwindcss/discussions/20006) 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`:

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

[Button](https://wingo-ui.com/components/button), [Card](https://wingo-ui.com/components/card) und [UIProvider](https://wingo-ui.com/components/ui-config) 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:

```tsx
// 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>
  );
}
```

> Live-Demo (Card): Fahr mit der Maus über die Karte oder drück darauf: Sie hebt sich mit einem tieferen Schatten an, sinkt beim Drücken leicht ein, und Fläche und Text kommen in beiden Themes aus den Surface-Tokens. Probier sie unter [Card](https://wingo-ui.com/components/card) aus und installier sie mit `npx wingo-ui@latest add card`.

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:

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

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

> Live-Demo (Button): Klick auf den Button: Er sinkt beim Drücken ein, zeigt dann seinen Ladezustand in derselben Breite, und jede Farbe kommt aus den Tokens in globals.css. Probier sie unter [Button](https://wingo-ui.com/components/button) aus und installier sie mit `npx wingo-ui@latest add button`.

Der [Guide zum Setup einer Next.js-Komponentenbibliothek](https://wingo-ui.com/de/blog/next-js-component-library-setup) geht init, `"use client"`-Grenzen und Updates im Detail durch, und die [Theming-Doku](https://wingo-ui.com/docs/theming) listet jedes Token. Weitere Artikel zu diesem Stack findest du unter [Next.js und Tailwind CSS](https://wingo-ui.com/de/blog/category/nextjs-tailwind).

## Wie sehen die fertigen Dateien aus?

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

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

```css
/* 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](https://wingo-ui.com/docs/installation) behandelt Vite und bestehende Projekte.

## Komponenten in diesem Artikel

- [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Installation: `npx wingo-ui@latest add button`
- [Card](https://wingo-ui.com/components/card) (Free): A React card component for listings, stats, settings and plans: media, header, body and footer parts, and a lift-and-press mode. Installation: `npx wingo-ui@latest add card`
- [UIProvider](https://wingo-ui.com/components/ui-config) (Free): A React config provider for Wingo UI: app-wide default props for every component, the Intl locale and a reduced-motion policy. Installation: `npx wingo-ui@latest add ui-config`

## 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.

---

Quelle: https://wingo-ui.com/de/blog/tailwind-v4-nextjs