Next.js

// TODO: link to examples

เริ่มต้นกับ UnoCSS และ Next.js

Setup

การติดตั้ง

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

การกำหนดค่า

สร้าง uno.config.ts ที่ root ของโปรเจค

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

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

เพิ่ม plugin

จากนั้นเพิ่ม UnoCSS เป็น plugin ไปยัง webpack ผ่าน 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

Import stylesheets

จากนั้น import uno.css ใน _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

การใช้งาน

จัด style คอมโพเนนต์ของคุณด้วย unocss!