Next.js

// TODO: link para exemplos

Começando com UnoCSS e Next.js.

Configuração

Instalação

pnpm

pnpm add -D unocss @unocss/webpack

yarn

yarn add -D unocss @unocss/webpack

npm

npm install -D unocss @unocss/webpack

bun

bun add -D unocss @unocss/webpack

Configuração

Crie uno.config.ts na raiz do seu projeto.

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetWebFonts,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    // ...
  ],
})

Adicionar plugin

Em seguida, adicione o UnoCSS como um plugin do webpack através do seu next.config.js.

// next.config.js
const UnoCSS = require('@unocss/webpack').default

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      UnoCSS(),
    )
    return config
  },
}

module.exports = nextConfig

Importar folhas de estilo

Em seguida, importe uno.css em _app.tsx.

import type { AppProps } from 'next/app'
// _app.tsx
import '@unocss/reset/tailwind.css'

import 'uno.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

Uso

Estilize seus componentes com unocss!

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

Hot Module Reload

Para suportar HMR, você precisa desativar o cache do webpack.

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
+   config.cache = false
    config.plugins.push(UnoCSS())
    return config
  }
}

Solução de problemas

Erro relacionado a módulo virtual

Error: ENOENT: no such file or directory, open '.../_virtual_/__uno.css'

Tente excluir o diretório .next e reinicie o servidor de desenvolvimento.

Outros

Você pode precisar aumentar seu destino para pelo menos es2015 no seu tsconfig.json para construir seu projeto.

Arquivos com extensão .js não são suportados por padrão. Altere suas extensões de arquivo para .jsx ou tente incluir arquivos js na sua configuração com include: /\.js$/. Saiba mais.