---
url: https://unocss.dev/integrations/next.md
description: Getting started with UnoCSS and Next.js.
---
# Next.js
Getting Started with UnoCSS and Next.js. Check the [example](https://github.com/unocss/unocss/tree/main/examples/next).
## Setup
### Installation
::: code-group
```bash [pnpm]
pnpm add -D unocss @unocss/postcss @unocss/reset
```
```bash [yarn]
yarn add -D unocss @unocss/postcss @unocss/reset
```
```bash [npm]
npm install -D unocss @unocss/postcss @unocss/reset
```
```bash [bun]
bun add -D unocss @unocss/postcss @unocss/reset
```
:::
### Configuration
Create `uno.config.ts` or `uno.config.js` at the root of your project.
::: code-group
```ts [uno.config.ts]
import {
defineConfig,
presetAttributify,
presetIcons,
presetWebFonts,
presetWind3
} from 'unocss'
export default defineConfig({
presets: [
presetWind3(),
// ...
],
})
```
```js [uno.config.js]
import {
defineConfig,
presetAttributify,
presetIcons,
presetWebFonts,
presetWind3
} from 'unocss'
export default defineConfig({
presets: [
presetWind3(),
// ...
],
})
```
:::
Create `postcss.config.mjs` at the root of your project.
```js [postcss.config.mjs]
export default {
plugins: {
'@unocss/postcss': {
content: ['./app/**/*.{html,js,ts,jsx,tsx}'],
},
},
}
```
### Import stylesheets
Add `@unocss all;` in `globals.css`.
```css [globals.css]
@unocss all;
/* ... */
```
Then import `@unocss/reset/tailwind.css` in your layout file.
::: code-group
```tsx [layout.tsx]
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import '@unocss/reset/tailwind.css'
import './globals.css'
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
})
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
})
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
{children}
)
}
```
```js [layout.js]
import { Geist, Geist_Mono } from 'next/font/google'
import '@unocss/reset/tailwind.css'
import './globals.css'
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
})
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
})
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
{children}
)
}
```
:::
## Usage
Style your components with unocss!
::: code-group
```tsx [page.tsx]
export default function Home() {
return (
Nextjs
)
}
```
```js [page.js]
export default function Home() {
return (
Nextjs
)
}
```
:::
## License
* MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)