---
title: CSS Modules
description: Style your Next.js Application with CSS Modules.
url: "https://nextjs.org/docs/14/app/building-your-application/styling/css-modules"
version: 14.2.35
lastUpdated: 2024-04-11
prerequisites:
  - "Building Your Application: /docs/14/app/building-your-application"
  - "Styling: /docs/14/app/building-your-application/styling"
---


Next.js has built-in support for CSS Modules using the `.module.css` extension.

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.

## Example

CSS Modules are an *optional feature* and are **only enabled for files with the `.module.css` extension**.
Regular `<link>` stylesheets and global CSS files are still supported.

In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

## Global Styles

## External Stylesheets

## Additional Features

Next.js includes additional features to improve the authoring experience of adding styles:

* When running locally with `next dev`, local stylesheets (either global or CSS modules) will take advantage of [Fast Refresh](/docs/architecture/fast-refresh) to instantly reflect changes as edits are saved.
* When building for production with `next build`, CSS files will be bundled into fewer minified `.css` files to reduce the number of network requests needed to retrieve styles.
* If you disable JavaScript, styles will still be loaded in the production build (`next start`). However, JavaScript is still required for `next dev` to enable [Fast Refresh](/docs/architecture/fast-refresh).
---

For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)