UnoCSS Next.js Integration

// TODO: link to examples

UnoCSS এবং Next.js দিয়ে শুরু করা।

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

আপনার project-এর root-এ uno.config.ts তৈরি করুন।

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

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

Plugin যোগ করুন

তারপর webpack-এর মাধ্যমে UnoCSS-কে একটি plugin হিসাবে আপনার 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

Stylesheets import করুন

তারপর _app.tsx-এ uno.css import করুন।

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

আপনার components গুলিকে unocss দিয়ে style করুন!

/* 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 support করার জন্য আপনাকে webpack-এর caching-এ opt-out করতে হবে।

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

Troubleshooting

Virtual module সম্পর্কিত Error

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

.next directory delete করার চেষ্টা করুন এবং dev server restart করুন।

অন্যান্য

আপনার project build করতে আপনার tsconfig.json-এ আপনার target-কে কমপক্ষে es2015-এ bump করতে হতে পারে।

Default হিসাবে .js extension সহ files support করা হয় না। আপনার file extensions গুলিকে .jsx-এ পরিবর্তন করুন বা আপনার config-এ include: /\.js$/ দিয়ে js files include করার চেষ্টা করুন। আরো জানুন।