Zum Inhalt springen
    WingoUI
    KomponentenVorlagenDokuPreiseKI-AgentenBlogChangelog
    1. Startseite
    2. Blog
    3. Next.js und Tailwind CSS
    Blog

    Guides zu Next.js und Tailwind CSS für Komponenten-Autoren

    Next.js, React und Tailwind CSS ändern sich unter jeder Komponentenbibliothek ständig. React 19 hat ref zu einer normalen Prop gemacht. Tailwind CSS v4 hat die Konfiguration mit Theme-Variablen ins CSS verlegt. Der App Router hat verändert, wie Server- und Client-Komponenten die Arbeit aufteilen, und damit auch, wie Hydration-Fehler entstehen. Diese Kategorie erklärt diese Änderungen aus Sicht von Leuten, die UI-Code schreiben und pflegen.
    EmpfohlenNext.js und Tailwind CSS

    Tailwind v4 Design Tokens: Farben, Dark Mode, Kontrast

    Tailwind v4 Design Tokens aus einer produktiven React-Bibliothek: @theme inline, semantische Flächen, Statusfarben, Dark Mode und ein Kontrast-Check für CI.

    SR
    Serban Rusu
    9. Okt. 2026 · 20 Min. Lesezeit

    Alle Artikel

    /Slash
    Next.js und Tailwind CSS

    Next.js Cookie Banner: DSGVO und Consent Mode v2

    Ein Next.js Cookie Banner, der der DSGVO standhält: Zustimmen und Ablehnen gleich groß, Schalter je Kategorie, Consent Mode v2 und Embeds erst nach Zustimmung.

    SRSerban Rusu·16. Okt. 2026·12 Min. Lesezeit
    Next.js und Tailwind CSS

    Nextjs JSON LD: typisiertes Schema, das zur Seite passt

    Nextjs JSON LD im App Router: eine sichere Script-Komponente, typisierte schema-dts-Builder und ein CI-Check, der anschlägt, sobald Markup und Seite abweichen.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Next.js und Tailwind CSS

    React Controllable State Hook: Code und 3 Fallstricke

    Bau einen React Controllable State Hook, der value oder defaultValue annimmt. Mit komplettem TypeScript-Code, drei echten Fallstricken und dem Radix-Vergleich.

    SRSerban Rusu·16. Okt. 2026·11 Min. Lesezeit
    Next.js und Tailwind CSS

    next-themes Hydration Error: Flackern in Next.js beheben

    Behebe den next-themes Hydration Error und das Theme-Flackern im Next.js App Router. Plus: ein Theme Toggle, der schon beim ersten Paint richtig aussieht.

    SRSerban Rusu·13. Okt. 2026·8 Min. Lesezeit
    Next.js und Tailwind CSS

    Next.js Component Library im App Router einrichten

    Next.js Component Library im App Router einrichten, getestet mit Next.js 16.4: use client, Tokens in globals.css, Dark Mode ohne Flackern, Updates per CLI.

    SRSerban Rusu·13. Okt. 2026·8 Min. Lesezeit
    Next.js und Tailwind CSS

    Prefers Reduced Motion React ohne Hydration Mismatch

    Prefers reduced motion React Guide: Respektier die OS-Einstellung in Next.js ohne Hydration Mismatch und ersetz Springs durch kurze Fades, die Feedback geben.

    SRSerban Rusu·13. Okt. 2026·8 Min. Lesezeit
    Next.js und Tailwind CSS

    shadcn Vite Setup mit Tailwind CSS v4 und React 19

    shadcn Vite Setup, getestet mit Vite 8 und TypeScript 6: Tailwind-v4-Plugin, @-Alias in tsconfig.app.json, Dark Mode ohne Next.js, dann Komponenten hinzufügen.

    SRSerban Rusu·13. Okt. 2026·7 Min. Lesezeit
    Next.js und Tailwind CSS

    Tailwind v4 Dark Mode: Klassen-Toggle, Tokens, next-themes

    Tailwind v4 Dark Mode per Klasse: die @custom-variant-Zeile, next-themes in Next.js, warum dark: deinen Toggle ignoriert und Tokens für zwei echte Themes.

    SRSerban Rusu·13. Okt. 2026·9 Min. Lesezeit
    Next.js und Tailwind CSS

    React 19 forwardRef Migration: ref als Prop in TypeScript

    React 19 forwardRef Migration in TypeScript: ref als normale Prop, Typen per ComponentProps, Refs samt Cleanup zusammenführen und asChild intakt halten.

    SRSerban Rusu·9. Okt. 2026·9 Min. Lesezeit
    Next.js und Tailwind CSS

    React Use Mobile Hook: SSR-sicher, ohne Hydration-Fehler

    Warum ein React Use Mobile Hook auf dem Server false liefert, wann CSS-Breakpoints besser passen und wie useSyncExternalStore den Hydration Mismatch verhindert.

    SRSerban Rusu·9. Okt. 2026·9 Min. Lesezeit

    Über Next.js und Tailwind CSS

    Die Artikel behandeln Design Tokens in Tailwind v4, einen Dark Mode, der gestaltet und nicht einfach invertiert ist, Kontrastprüfungen, Media-Query-Hooks, die beim Server-Rendering sicher sind, Animationen, die reduzierte Bewegung respektieren, und die TypeScript-Muster, die Props streng und gut lesbar halten. Jeder Guide stammt aus Problemen, die wir beim Bau von Wingo UI mit Next.js 16, React 19 und Tailwind CSS v4 gelöst haben. Die Beispiele sind also in einer echten Codebasis getestet.

    Wenn du ein Designsystem pflegst, ein älteres shadcn/ui-Setup migrierst oder einfach willst, dass deine Komponenten das nächste Framework-Upgrade überstehen, fang hier an.

    Weitere Themen

    • Mobile UI mit React

      So baust du React-Oberflächen, die sich auf dem Smartphone nativ anfühlen: Bottom Sheets, Touch-Ziele, Safe Areas und Tabellen, die zu Karten werden.

      23 Artikel

    • UI mit KI-Agenten bauen

      Praxisnahe Guides für React-UI mit Claude Code, Cursor und Codex: MCP-Server, Rules-Dateien, llms.txt und Komponenten-Registries.

      13 Artikel

    • Komponenten-Guides

      Guides zu einzelnen React-Komponenten: wann du welche nutzt, die wichtigen Props, Barrierefreiheit, Verhalten auf dem Smartphone und typische Fehler.

      57 Artikel

    • Vergleiche und Alternativen

      Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.

      14 Artikel

    • Praxis: Screens und Apps

      Schritt-für-Schritt-Tutorials für echte React-Screens und Apps, von Anmeldung und Einstellungen bis zum Admin-Dashboard, jeder Screen auch auf dem Smartphone.

      17 Artikel

    Newsletter

    Neue Artikel per E-Mail

    Neue Guides, Tutorials und Vergleiche aus dem Wingo UI Blog, sobald sie erscheinen. Die meisten Artikel sind auf Englisch.

    Kein Spam. Du kannst dich jederzeit abmelden.

    WingoUI

    Animierte, konfigurierbare, mobile-first React-Komponenten und Blöcke. Kopier den Quellcode, pass ihn an und lass deinen Coding-Agenten damit bauen.

    Produkt

    • Komponenten
    • Vorlagen
    • Preise
    • KI-Agenten
    • Theme-Generator

    Ressourcen

    • Doku
    • Blog
    • Changelog
    • Changelog-RSS
    • llms.txt

    Rechtliches

    • AGB
    • Datenschutz
    • Rückerstattung
    • Lizenz
    • Impressum

    Komponenten-Kategorien

    • Buttons & Actions
    • Inputs
    • Forms
    • Navigation
    • Overlays
    • Feedback
    • Data Display
    • Tables & Lists
    • Charts & Stats
    • Layout
    • Media
    • AI Kit
    • Text & Effects
    • Mobile
    • Commerce
    • Marketing Sections
    • Blocks
    • Hooks & Utilities

    © 2026 Wingo UI

    Wingo UI