# UnoCSS Documentation
# Source: https://raw.githubusercontent.com/unocss/unocss/main/docs/integrations/next.md
# Path: docs/integrations/next.md

---
title: Next.js
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 (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  )
}
```

```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 (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  )
}
```

:::

## Usage

Style your components with unocss!

::: code-group

```tsx [page.tsx]
export default function Home() {
  return (
    <main className="py-20 px-12 text-center flex flex-col items-center gap-20px">
      <span className="text-blue text-5xl text-hover:red cursor-default">Nextjs</span>
      <div className="i-carbon-car inline-block text-4xl" />
      <button className="btn w-10rem">Button</button>
    </main>
  )
}
```

```js [page.js]
export default function Home() {
  return (
    <main className="py-20 px-12 text-center flex flex-col items-center gap-20px">
      <span className="text-blue text-5xl text-hover:red cursor-default">Nextjs</span>
      <div className="i-carbon-car inline-block text-4xl" />
      <button className="btn w-10rem">Button</button>
    </main>
  )
}
```

:::

## License

- MIT License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu)