Next.js 50: Global Styles & Tailwind Integration
easy⏱ 5 mincoursenextjs
One global entry point
app/layout.tsx imports ./globals.css a single time — Next.js inlines it into every page's initial HTML, so there is no risk of forgetting it on some route. Inside, @tailwind base; @tailwind components; @tailwind utilities; injects Tailwind's generated utility classes alongside your own resets and CSS variables.
// app/layout.tsx
import "./globals.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--brand: #61dafb;
}
Compose a Badge from utilities
Using the existing tw fragments (tw.p2, tw.roundedFull, tw.bgBrand, tw.textDark), build a Badge component that merges them with Object.assign — the same 'stack small pieces' idea Tailwind's class names give you. Render it next to the existing button.
Utility-first vs custom CSS
Tailwind trades hand-written CSS files for composable, constrained utilities — you rarely invent a new spacing or color value, which keeps a whole app visually consistent. globals.css is still where you reach for the handful of things utilities cannot express: @font-face, resets, and CSS variables like your theme's --brand.