Skip to content
HomeAboutActivityPortfolioBlogAsk AI

Moving the Next.js Root Layout Made Tailwind Disappear

Adityo Guni Waluyo

A missing globals.css import after moving the root layout into app/[locale] stripped every page of styling — while the build stayed green.

#nextjs#tailwindcss#css#i18n

TL;DR

An i18n refactor moved the Next.js root layout into app/[locale]/layout.tsx and accidentally dropped the globals.css import. Without that file Tailwind v4 never loaded, so the site rendered as unstyled HTML while the build stayed green. The fix was re-adding the import, a reminder to visually check pages and grep for globals.css after layout changes.

A commit had just landed. I opened a browser tab, hit refresh, and what came back was not a polished interface — it was a plain stack of unstyled HTML. No colors, no spacing, everything stacked vertically.

My first instinct blamed the build process. Maybe the design tokens were broken, or some old server cache never cleared. I even re-checked the Tailwind config, sure that a syntax change had slipped through.

But when I tried the most basic utility class, bg-red-500, on a component, nothing happened. No red, no layout change. That is when I realized this was not a token problem. Something more fundamental was broken.

I opened a terminal and grepped for globals.css across the whole app folder. Nothing. One line, import "../globals.css", had not made the journey when I moved the layout file.

My first guess was wrong

Context: I was doing an i18n refactor on a Next.js App Router site. Following the official guide, the root layout moved from app/layout.tsx into app/[locale]/layout.tsx.

That move was actually correct. The Next.js docs explicitly allow nesting the root layout inside the [lang] folder for locale-based routing [5]. The problem: I wrote the new layout file from scratch, and a single global CSS import got left behind.

As a result, Tailwind v4 and every design token never loaded. The build passed with zero errors and zero warnings. The page worked and was interactive — it just looked destroyed.

Why that makes sense

Next.js documents the root layout as the place where global CSS gets imported; global styles are exactly what a framework's base styles should use [4]. In Tailwind v4 everything enters through one @import "tailwindcss" line inside that global CSS file [6]. If that file is not imported anywhere, Tailwind effectively does not exist on the page.

Here is the confusing part: the breakage is total and constant, not a hydration glitch. Production CSS gets served even with JavaScript disabled [5]. The build never complains because the new layout.tsx is syntactically valid — it just omits the stylesheet.

Four minutes after the layout-move commit, I pushed a follow-up. Its entire content: import "../globals.css", back where it belonged.

Check before you commit

Lesson for myself, going forward: never trust a green build after a layout migration. Open one page, check it visually, and confirm the global CSS import still exists. One

grep -r "globals.css" app/

before committing can save an hour of debugging a problem that has nothing to do with application logic.

[4] Next.js: CSS in App Router
[5] Next.js: Internationalization
[6] Tailwind: install with PostCSS

Related articles

seo

Two Route Handlers for llms.txt, Zero Drift

Adding llms.txt route handlers to a bilingual Next.js App Router site and generating the file from the same content modules the pages render.

frontend

Why I Stopped Patching HTML lang Client-Side in Next.js

Moving the root layout into the [locale] segment makes html lang server-rendered, deletes the client-side language bootstrap, and passes the structural audit.

frontend

The Three Metadata Layers Behind a Clean Next.js SEO Audit

Canonical, hreflang, metadataBase, and JSON-LD LocalBusiness: the three layers that made sixteen bilingual Next.js routes pass an SEO audit.

frontend

A Next.js Locale Switcher That Doesn't Lose Your Visitor

Build a Next.js App Router locale switcher that preserves the current path with usePathname and a regex swap, plus an accessible active state.

frontend

The /en/about Bug: When Next.js Pages Ignore Route Params

The /en page kept showing Indonesian content while the build stayed green: synchronous page components that ignore params. The fix is obvious once you see it.

frontend

Conditional Footer in Next.js: Keep the Client Small

Hiding the footer on a chat route without giving up server rendering, using the composition pattern from the Next.js docs.

tooling

One Qwen chat for two articles: followups via chat URL

A --chat-url option lets EN translation reuse the existing Qwen chat, one chat for two articles, plus how force-cache works in Next.js 15.

ai

One SSE Stream, Two AI Answers

A chatbot needs both a quick summary and a full explanation from one LLM generation. The answer: marker-based splitting in the SSE stream, with separate cache storage and mid-stream parsing.