getting-started/styling

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CSS styling methods available in Next.js

Next.js provides six main ways to style applications: Tailwind CSS, CSS Modules, Global CSS, External Stylesheets, Sass, and CSS-in-JS.

Tailwind CSS installation and setup

Install Tailwind CSS with 'npm install -D tailwindcss @tailwindcss/postcss' (or equivalent for pnpm, yarn, bun). Add the PostCSS plugin to postcss.config.mjs with entry '@tailwindcss/postcss': {}. Import Tailwind in your global CSS file with '@import "tailwindcss";'. Import the global CSS file in your root layout component.

CSS Modules file naming and usage

Create a file with extension '.module.css' to use CSS Modules. Import the CSS Module file into a component, then access class names as properties on the imported object. For example, import styles from './blog.module.css' and use className={styles.blog}.

Global CSS in App Router

Create an app/global.css file and import it in the root layout to apply styles to every route in the application. Global styles can be imported into any layout, page, or component inside the app directory. Global styles do not remove stylesheets as you navigate between routes, which can lead to conflicts. Recommendation: use global styles for truly global CSS (like Tailwind's base styles), Tailwind CSS for component styling, and CSS Modules for custom scoped CSS.

External stylesheets in App Router

Stylesheets published by external packages can be imported anywhere in the app directory, including colocated components. Example: import 'bootstrap/dist/css/bootstrap.css' in a layout or page component. In React 19, '<link rel="stylesheet" href="..." />' can also be used.

CSS import ordering determines cascade order

The order of CSS in production output depends on the order you import styles in your code. If component A is imported before component B, A's stylesheet is ordered before B's stylesheet. To keep CSS ordering predictable, contain CSS imports to a single entry file and import global styles in the root of the application.

CSS ordering recommendations

To maintain predictable CSS ordering: contain CSS imports to a single JavaScript/TypeScript entry file; import global styles and Tailwind stylesheets at the root; use Tailwind CSS for most styling needs; use CSS Modules for component-specific styles when Tailwind utilities are insufficient; use consistent naming conventions like '<name>.module.css'; extract shared styles into shared components to avoid duplicate imports; turn off linters that auto-sort imports like ESLint's 'sort-imports'; use the cssChunking option in next.config.js to control CSS chunking.

CSS behavior in development vs production

In development (next dev), CSS updates apply instantly with Fast Refresh. In production (next build), all CSS files are automatically concatenated into multiple minified and code-split .css files, ensuring minimal CSS is loaded per route. CSS still loads with JavaScript disabled in production, but JavaScript is required in development for Fast Refresh. CSS ordering can behave differently in development; always verify with next build to check final CSS order.

next/font module automatically optimizes fonts

The next/font module automatically optimizes fonts and removes external network requests for improved privacy and performance. It includes built-in self-hosting for any font file, allowing optimal loading of web fonts with no layout shift.

Import and apply Google fonts with next/font/google

To use Google fonts, import the font name from next/font/google, call it as a function with options like subsets, and apply the returned className to an HTML element. For example: import { Geist } from 'next/font/google'; const geist = Geist({ subsets: ['latin'] }); then use className={geist.className} on an element.

Apply fonts to entire application via Root Layout

Fonts are scoped to the component they are used in. To apply a font to the entire application, add it to the Root Layout (app/layout.tsx).

Use variable fonts for best performance

Variable fonts are recommended for the best performance and flexibility. If a variable font cannot be used, specify a weight property in the font configuration, such as weight: '400'.

Import and apply local fonts with next/font/local

To use local fonts, import localFont from next/font/local and specify the src property with the path to the font file relative to the file where localFont is called. Fonts can be stored anywhere in the project, including the public folder or co-located inside the app folder.

Local fonts with multiple files

For a single font family with multiple files, src can be an array of objects. Each object specifies path (relative path to font file), weight (font weight as string), and style (such as 'normal' or 'italic').

Local fonts multiple files example

const roboto = localFont({ src: [ { path: './Roboto-Regular.woff2', weight: '400', style: 'normal', }, { path: './Roboto-Italic.woff2', weight: '400', style: 'italic', }, { path: './Roboto-Bold.woff2', weight: '700', style: 'normal', }, { path: './Roboto-BoldItalic.woff2', weight: '700', style: 'italic', }, ], })

Google fonts are self-hosted

Google fonts imported via next/font/google are automatically self-hosted as static assets and served from the same domain as the deployment. This means no requests are sent to Google by the browser when users visit the site.

Give your agent this brain