---
title: "Styling and Typography"
description: "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..."
last_updated: "2026-10-12T06:40:49.088149+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/styling-and-typography"
---

## 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:
1. Locate your main global stylesheet (commonly named `globals.css`).
2. Add your custom CSS variables, resets, or base styles inside the file.
3. Import the stylesheet into your root layout file so it applies site-wide.

```css
/* 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:

```css
@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:

```css
@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.

```javascript
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.

## Related

- [Images and Metadata](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/images-and-metadata)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.