Integrare UnoCSS Next.js

// TODO: link către exemple

Începeți cu UnoCSS și Next.js.

Configurare

Instalare

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

Configurare

Creați uno.config.ts la rădăcina proiectului dvs.

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

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

Adăugare plugin

Apoi adăugați UnoCSS ca plugin la webpack prin 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

Importare foi de stil

Apoi importați uno.css în _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

Utilizare

Stilizați componentele dvs. cu UnoCSS!