Styling, Fonts, and Images

Next.js 10,514 does not invent a styling language. Everything about the cascade, custom properties and Tailwind 5,202 utilities from Front-End Web Development applies unchanged inside a Next.js component. What the framework adds is build-time plumbing: it compiles CSS Modules and Sass 22,539 with no config file, chunks and minifies stylesheets per route, and — the part with no equivalent in a plain React 7,897 app — turns fonts and images into build artifacts it can preload, resize and re-encode for you. That last point is why this section exists. A web font and a hero photograph are the two assets most likely to wreck a page's Core Web Vitals, and both fail in ways you never see on a fast laptop: text reflows when the real font arrives, and a 500 KB JPEG downloads in full onto a phone that paints it 320 pixels wide.

Styling approaches Next.js 16.3.5 supports, and where each one runs
Approach Setup needed Scope Server Components
Global CSS none whole app yes
CSS Modules none one component yes
Tailwind CSS @tailwindcss/postcss utility classes yes
Sass npm 2,036  i -D sass file or module yes
CSS-in-JS registry component one component Client only

The last column surprises people arriving from a client-rendered React app. A Server Component never runs in the browser and never re-renders, so a library that generates class names during render has nothing to attach to — hence the scaffolding in CSS-in-JS.

Subsections