Next.js

// TODO: enlazar a ejemplos

Comenzando con UnoCSS y Next.js.

Configuración

Instalación

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

Configuración

Crea uno.config.ts en la raíz de tu proyecto.

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

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

Agregar plugin

Luego agrega UnoCSS como un plugin a webpack a través de tu 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 hojas de estilo

Luego importa uno.css en _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

¡Estiliza tus componentes con 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 soportar HMR tienes que optar por no usar el caché de webpack.

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

Solución de Problemas

Error relacionado con módulo virtual

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

Intenta eliminar el directorio .next y reiniciar el servidor de desarrollo.

Otros

Podrías necesitar aumentar tu target al menos a es2015 en tu tsconfig.json para construir tu proyecto.

Files with .js extension are not supported by default. Change your file extensions to .jsx or try to include js files in your config with include: /\.js$/. Learn more.