Next.js supports multiple styling approaches. Choose based on your team preferences and project scale.

Global CSS

Import global styles in the root layout — they apply app-wide:

  /* app/globals.css */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
}
  
  // app/layout.tsx
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}

Import global CSS only in the root layout.

CSS Modules

CSS Modules scope styles to a component — class names are hashed automatically:

  /* components/Card.module.css */
.card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.title { font-size: 1.25rem; font-weight: 600; }
  
  import styles from './Card.module.css';

export default function Card({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <div className={styles.card}>
            <h2 className={styles.title}>{title}</h2>
            {children}
        </div>
    );
}

CSS Modules work in both Server and Client Components.

Tailwind CSS

Tailwind is the most popular choice for Next.js projects. Select it during create-next-app.

  // tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
    content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: { extend: { colors: { brand: '#2563eb' } } },
    plugins: [],
};

export default config;

Use utility classes directly in JSX:

  export default function Hero() {
    return (
        <section className="flex min-h-screen items-center justify-center bg-gray-50">
            <div className="max-w-2xl text-center">
                <h1 className="text-4xl font-bold text-gray-900">
                    Welcome to Next.js
                </h1>
                <p className="mt-4 text-lg text-gray-600">
                    Build fast, SEO-friendly web apps.
                </p>
                <button className="mt-8 rounded-lg bg-brand px-6 py-3 text-white hover:bg-blue-700">
                    Get Started
                </button>
            </div>
        </section>
    );
}

Font Optimization

Next.js includes next/font for automatic font loading:

  import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body className={inter.className}>{children}</body>
        </html>
    );
}

next/font self-hosts fonts — no layout shift, no external requests.

Organization Tips

  • Use Tailwind for layout, spacing, and responsive design
  • Use CSS Modules for component-specific complex styles
  • Use globals.css for resets, CSS custom properties, and base typography

For CSS-in-JS libraries (styled-components, Emotion), configure a registry in the root layout since Server Components cannot use runtime CSS-in-JS directly.

Next: optimize SEO with the Metadata API.