WingoUI
ComponentsTemplatesDocsChangelogBlogAI agents
ThemePricing
  1. Home
  2. Blog
  3. Next.js and Tailwind CSS
Blog

Next.js and Tailwind CSS guides for component authors

Next.js, React and Tailwind CSS keep changing under every component library. React 19 made ref a regular prop. Tailwind CSS v4 moved configuration into CSS with theme variables. The App Router changed how server and client components split work, and with it how hydration mismatches happen. This category explains those changes from the point of view of someone who writes and maintains UI code.

All posts

Next.js and Tailwind CSS

React 19 forwardRef Migration: ref as a Prop in TypeScript

React 19 forwardRef migration in TypeScript: take ref as a regular prop, type it with ComponentProps, merge refs with cleanups and keep asChild working.

SRSerban Rusu·Oct 9, 2026·9 min read
Next.js and Tailwind CSS

React Use Mobile Hook: SSR-Safe, No Hydration Mismatch

Why a React use mobile hook is false on the server, when CSS breakpoints beat it, and an SSR-safe useSyncExternalStore version with no hydration mismatch.

SRSerban Rusu·Oct 9, 2026·9 min read
Next.js and Tailwind CSS

Tailwind v4 Design Tokens: Colors, Dark Mode and Contrast

Tailwind v4 design tokens from a production React library: @theme inline, semantic surfaces, status colors, dark mode and a contrast check you can run in CI.

SRSerban Rusu·Oct 9, 2026·19 min read

About Next.js and Tailwind CSS

The posts cover design tokens in Tailwind v4, dark mode that is designed instead of inverted, color contrast checks, media query hooks that are safe during server rendering, motion that respects reduced motion settings, and the TypeScript patterns that keep component props strict and easy to read. Each guide comes from problems we solved while building Wingo UI on Next.js 16, React 19 and Tailwind CSS v4, so the examples are tested in a real codebase.

If you maintain a design system, migrate an older shadcn/ui setup or simply want your components to survive the next framework upgrade, start here.

More topics

  • Mobile UI in React

    How to build React interfaces that feel native on phones: bottom sheets, touch targets, safe areas and tables that turn into cards.

    10 posts

  • Building UI with AI agents

    Practical guides for building React UI with Claude Code, Cursor and Codex: MCP servers, rules files, llms.txt and component registries.

    4 posts

  • Component guides

    Deep guides to single React components: when to use each one, the props that matter, accessibility, mobile behavior and common pitfalls.

    9 posts

  • Comparisons and alternatives

    Honest, dated comparisons of React component libraries and tools, with sources, prices and a clear pick for each use case.

    3 posts

  • Build it: screens and apps

    Step by step tutorials that build real React screens and apps, from sign in and settings to admin dashboards, with every screen working on phones.

    1 post

Newsletter

Get new posts by email

New guides, tutorials and comparisons from the Wingo UI blog, sent when they are published.

No spam. Unsubscribe at any time.

WingoUI

Animated, configurable, mobile-first React components. Copy the source, make it yours, and let your coding agent build with it.

ComponentsTemplatesPricingBlogTheme

Component categories

  • 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
Wingo UI