Getting Started
Core Concepts
Troubleshooting
Styling your application involves configuring global styles, utilizing utility-first CSS frameworks like Tailwind, loading fonts, and managing static assets such as images. You can combine traditional stylesheets with modern tooling to ensure your app looks polished across all devices and screen sizes while maintaining high performance.
Global styles apply across your entire application, handling baseline resets, default typography, and root color variables. When using Tailwind CSS, your stylesheets load the framework using an import rule and define design tokens like colors and border radii for light and dark modes.
To style your application with Tailwind CSS:
@import "tailwindcss";:root selector and bind them using @theme inline blocks so utility classes can reference your custom values.Tip
You can easily support automatic light and dark mode switching by setting up CSS variables for both standard and dark color schemes, then referencing them via Tailwind theme configurations or standard CSS media queries.
You can load typography efficiently using stylesheets and CSS variables. Standard layout configurations set up root classes, font smoothing, and fallback font families like Arial or Helvetica for clean rendering across all platforms.
To apply custom font setups:
body {
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Note
System and web-safe fonts ensure your text renders instantly without requiring external network requests.
Static assets like logos and icons can be rendered using the built-in image component, which automatically handles resizing, optimization, and loading behaviors.
To display and optimize static images:
import Image from "next/image";<Image
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>Warning
Always provide explicit width and height props to your images, or use layout sizing constraints, to prevent cumulative layout shifts while the image file downloads.