> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt
> Use this file to discover all available pages before exploring further.
# CSS
> Style your Next.js application with CSS Modules, global CSS, and external stylesheets.
Next.js supports several CSS approaches out of the box. Use whichever fits your project:
Locally scoped styles with auto-generated class names.
Apply styles across every route from a single file.
Import CSS from npm packages directly in the App Router.
Utility-first CSS framework built for Next.js.
## CSS Modules
CSS Modules locally scope CSS by generating unique class names. This lets you reuse the same class name across different files without naming collisions.
Create a file with the `.module.css` extension and import it into any component inside the `app` directory:
```css app/blog/blog.module.css theme={null}
.blog {
padding: 24px;
}
```
```tsx app/blog/page.tsx theme={null}
import styles from './blog.module.css'
export default function Page() {
return
}
```
```jsx app/blog/page.js theme={null}
import styles from './blog.module.css'
export default function Page() {
return
}
```
CSS Module files must end in `.module.css`. Regular `.css` files are treated as global CSS and will not produce unique class names.
## Global CSS
Global CSS applies styles across your entire application. Create a `globals.css` file and import it in your root layout to apply the styles to **every route**:
```css app/globals.css theme={null}
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
```
```tsx app/layout.tsx theme={null}
// These styles apply to every route in the application
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx app/layout.js theme={null}
// These styles apply to every route in the application
import './globals.css'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Global CSS can be imported into any layout, page, or component in the `app` directory. However, since Next.js uses React's built-in stylesheet support to integrate with Suspense, stylesheets are not currently removed as you navigate between routes—which can lead to conflicts. Reserve global styles for truly global CSS (like resets or base typography). Use [CSS Modules](#css-modules) for component-specific styles.
## External stylesheets
Stylesheets published by external packages can be imported anywhere in the `app` directory, including inside colocated components:
```tsx app/layout.tsx theme={null}
import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx app/layout.js theme={null}
import 'bootstrap/dist/css/bootstrap.css'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
In React 19, you can also use `` directly inside components.
## CSS ordering and merging
Next.js optimizes CSS during production builds by automatically chunking (merging) stylesheets. The **order of your CSS** depends on the **order you import styles in your code**.
For example, `base-button.module.css` will be ordered before `page.module.css` since `` is imported first:
```tsx page.tsx theme={null}
import { BaseButton } from './base-button'
import styles from './page.module.css'
export default function Page() {
return
}
```
```tsx base-button.tsx theme={null}
import styles from './base-button.module.css'
export function BaseButton() {
return
}
```
### Recommendations
To keep CSS ordering predictable:
* Contain CSS imports to a single JavaScript or TypeScript entry file where possible.
* Import global styles and Tailwind stylesheets at the root of your application.
* Use [Tailwind CSS](/app/styling/tailwind-css) for most styling needs.
* Use CSS Modules for component-specific styles when Tailwind utilities aren't sufficient.
* Use a consistent naming convention: `.module.css` rather than `.tsx`.
* Extract shared styles into shared components to avoid duplicate imports.
* Disable linters or formatters that auto-sort imports, such as ESLint's `sort-imports` rule.
* Use the [`cssChunking`](https://nextjs.org/api-reference/config/next-config-js) option in `next.config.js` to control how CSS is chunked.
## Development vs production
| Environment | Behavior |
| ------------ | -------------------------------------------------------------- |
| `next dev` | CSS updates apply instantly via Fast Refresh |
| `next build` | All CSS is concatenated into minified, code-split `.css` files |
CSS ordering can behave differently in development. Always verify the final CSS order by checking a production build with `next build`.