Styling and Typography

Last updated Oct 12, 2026100% grounded

Overview

Understanding Styling and Typography

Styling and typography shape the visual appearance of your application. This software supports global CSS stylesheets, CSS modules for scoped styling, and Tailwind CSS for utility-first styling. In addition, you can load web fonts with automatic optimization so that your typography loads quickly and reliably across all devices.

Note

Global CSS applies styles across your entire application, whereas CSS modules scope class names locally to prevent accidental naming conflicts between different components.

Applying Global CSS Styles

Global stylesheets apply styles to your entire application, such as setting default background colors, foreground text colors, and font families for the root body element.

To add or modify global styles:

Locate your main global stylesheet (commonly named globals.css).
Add your custom CSS variables, resets, or base styles inside the file.
Import the stylesheet into your root layout file so it applies site-wide.

/* Example global stylesheet configuration */
@import "tailwindcss";
 
:root {
  --background: #ffffff;
  --foreground: #171717;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
 
body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

Configuring Tailwind CSS

Setting Up Tailwind

This software supports Tailwind CSS for rapid UI development using utility classes. You can configure Tailwind using standard CSS imports and theme variables. To enable Tailwind CSS in your project, include the Tailwind import at the very top of your global stylesheet:

@import "tailwindcss";

Customizing Themes

You can customize colors, fonts, and border radii by defining inline theme variables inside your global stylesheet using the @theme inline block:

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

Loading and Using Web Fonts

Font Loading Setup

Web fonts can be loaded using font helper utilities that automatically configure variable font files, subsetting, and fallback metrics. Import your desired font functions, initialize them with configuration options like variable names and character subsets, and attach their generated CSS variables to your HTML root element.

import "./globals.css";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Tip

Assigning font variables to the root HTML element allows you to reference them easily via CSS variables or Tailwind utility classes throughout your application.

Troubleshooting and Best Practices

Warning

Do not import global CSS files or CSS modules inside special document-level templates where global styles are unsupported; instead, always import your global stylesheets in your root layout component.

Check File Extensions: Ensure style files use standard extensions such as .css, .module.css, or preprocessor extensions where configured.
Dark Mode Support: Leverage CSS media queries like @media (prefers-color-scheme: dark) or custom utility variants to seamlessly support both light and dark display modes.

Images and Metadata

Was this page helpful?

Data Fetching and Mutation

Images and Metadata