Back to Logbook
Tech

Exploring Next.js App Router and Tailwind CSS v4

2026-07-013 min read

Tailwind CSS has been the king of utility-first CSS. With version 4, the creators made a major architectural shift: moving configuration into CSS rather than JavaScript.

No More tailwind.config.js

In Tailwind v3, we defined colors, spacing, and fonts in a large JavaScript object. In v4, we use standard CSS @theme declarations:

@import "tailwindcss";

:root {
  --background: #09090b;
  --foreground: #f4f4f5;
  --accent: #06b6d4;
}

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

This means Tailwind v4 acts as a compiler directly over your CSS files, compiling custom properties down to high-performance utilities.

Leveraging the Next.js App Router

Pairing Tailwind v4 with the Next.js App Router gives us several benefits:

  • Server Components by Default: Zero client-side JavaScript is sent for rendering static text, resulting in lightning-fast initial page loads.
  • Dynamic Imports: Components like interactive garage maps or telemetry charts can be loaded lazily only when needed.
  • SEO Ready: Next.js automatically injects structured JSON-LD metadata for search engine indexing.

This website, Dinoy Lopez, is built exactly on these principles: lean, responsive, and utilizing modern compiler features.