← Next.js learning pathNext.js · Module 6 of 10
Styling and images
Style with CSS Modules or Tailwind, and optimise images and fonts.
📖 Key ideas
- Global CSS imported in the root layout.
- CSS Modules (Button.module.css) scope styles to a component.
- Tailwind CSS is supported out of the box.
- next/image resizes, lazy-loads and serves modern formats.
- next/font loads fonts with no layout shift.
💡 Real-life example: next/image is a smart photo printer: it prints the right size for every screen.
CSS ModulesLocally scoped CSS files
next/imageOptimised image component
next/fontOptimised font loading
CLSCumulative Layout Shift