Global CSS in Next.js applications

Global CSS refers to stylesheets that apply to your entire application. This is typically where you'd define things like:

• Base styles: Default font families, body background colors, reset styles.
• Utility classes: Custom utility classes that aren't provided by your chosen CSS framework.
• Third-party library styles: CSS from external libraries that need to be globally available.

In a Next.js App Router project, global CSS is usually imported directly into your root layout.tsx file. During the create-next-app setup, a globals.css file was automatically generated for you in the app/ directory (or src/app/). This file is where Tailwind CSS directives are added, making Tailwind's utility classes available throughout your project.

How to Use Global CSS

You've already been implicitly using global CSS. When you ran create-next-app and opted for Tailwind CSS, your globals.css file was set up to include Tailwind's base, components, and utilities layers.

Let's inspect the app/globals.css file:

app/globals.css (Existing file - no changes needed here, just for understanding)

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

This globals.css file is then imported in your app/layout.tsx:

app/layout.tsx (Excerpt - showing the import)

// app/layout.tsx (excerpt)
import './globals.css'; // This line imports your global CSS, including Tailwind's styles
import { Inter } from 'next/font/google';

// ... rest of the layout.tsx file

By importing globals.css in the root layout, all the styles defined within it (including Tailwind's extensive set of utility classes) become accessible to every component and page in your application.