Next.js

// TODO : lien vers les exemples

Commencer avec UnoCSS et Next.js.

Configuration

Installation

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

Configuration

Créez uno.config.ts à la racine de votre projet.

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

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

Ajouter le plugin

Ajoutez ensuite UnoCSS comme plugin à webpack via votre 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

Importer les feuilles de style

Importez ensuite uno.css dans _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

Utilisation

Stylisez vos composants avec 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

Pour supporter le HMR, vous devez désactiver le cache de webpack.

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

Dépannage

Erreur concernant le module virtuel

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

Essayez de supprimer le dossier .next et redémarrez le serveur de développement.

Autre

Vous devrez peut-être augmenter votre cible à au moins es2015 dans votre tsconfig.json pour construire votre projet.

Les fichiers avec l'extension .js ne sont pas supportés par défaut. Changez vos extensions de fichier en .jsx ou essayez d'inclure les fichiers js dans votre config avec include: /\.js$/. En savoir plus.