UnoCSS Next.js Integration

// TODO: örneklere bağlantı

UnoCSS ve Next.js ile Başlarken.

Setup

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

Projenizin kökünde uno.config.ts dosyası oluşturun.

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

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

Add plugin

Ardından UnoCSS'i next.config.js aracılığıyla webpack'e bir eklenti olarak ekleyin.

// 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

Ardından uno.css'i _app.tsx'ye içe aktarın.

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

Usage

Bileşenlerinizi unocss ile stillendirin!

/* 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

HMR'yi desteklemek için webpack'in önbelleğinden çıkmanız gerekir.

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

Troubleshooting

Error concerning virtual module

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

.next dizinini silmeyi ve geliştirme sunucusunu yeniden başlatmayı deneyin.

Other

Projenizi derlemek için tsconfig.json'da hedefinizi en az es2015'e yükseltmeniz gerekebilir.

.js uzantılı dosyalar varsayılan olarak desteklenmez. Dosya uzantılarınızı .jsx'e değiştirin veya yapılandırmanızda js dosyalarını include: /\.js$/ ile dahil etmeyi deneyin. Daha fazla bilgi.