---
title: "Styling and Assets"
description: "Styling your application involves configuring global styles, utilizing utility-first CSS frameworks like Tailwind, loading fonts, and managing static assets such as images. You can combine traditio..."
last_updated: "2026-09-23T10:57:21.220999+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/how-to-guides/styling-and-assets"
---

## Overview

### Introduction

Styling your application involves configuring global styles, utilizing utility-first CSS frameworks like Tailwind, loading fonts, and managing static assets such as images. You can combine traditional stylesheets with modern tooling to ensure your app looks polished across all devices and screen sizes while maintaining high performance.

---

### Global Styles and Tailwind CSS

Global styles apply across your entire application, handling baseline resets, default typography, and root color variables. When using Tailwind CSS, your stylesheets load the framework using an import rule and define design tokens like colors and border radii for light and dark modes.

To style your application with Tailwind CSS:
1. Open your global stylesheet file (typically located in your app styles or global CSS directory).
2. Add the Tailwind CSS import statement to the top of the file:
   ```css
   @import "tailwindcss";
   ```
3. Define custom theme variables or colors under the `:root` selector and bind them using `@theme inline` blocks so utility classes can reference your custom values.
4. Import your global stylesheet into your root layout or root app wrapper so it applies globally.

> [!TIP]
> You can easily support automatic light and dark mode switching by setting up CSS variables for both standard and dark color schemes, then referencing them via Tailwind theme configurations or standard CSS media queries.

---

### Loading Fonts

You can load typography efficiently using stylesheets and CSS variables. Standard layout configurations set up root classes, font smoothing, and fallback font families like Arial or Helvetica for clean rendering across all platforms.

To apply custom font setups:
1. Define your font family variables or standard font stacks inside your global stylesheet under body rules:
   ```css
   body {
     font-family: Arial, Helvetica, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   ```
2. Wrap your application layout with the appropriate HTML structure and language attributes.

> [!NOTE]
> System and web-safe fonts ensure your text renders instantly without requiring external network requests.

---

### Working with Static Assets and Images

Static assets like logos and icons can be rendered using the built-in image component, which automatically handles resizing, optimization, and loading behaviors. 

To display and optimize static images:
1. Place your image files in the public directory of your project.
2. Import the image component:
   ```javascript
   import Image from "next/image";
   ```
3. Render the image with explicit width, height, and alternative text properties:
   ```javascript
   <Image
     src="/next.svg"
     alt="Next.js logo"
     width={100}
     height={20}
     priority
   />
   ```

> [!WARNING]
> Always provide explicit `width` and `height` props to your images, or use layout sizing constraints, to prevent cumulative layout shifts while the image file downloads.

## Related

- [Project Structure Overview](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/getting-started/project-structure-overview)


## Sitemap

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