Astro Integration

Astro-এর জন্য UnoCSS integration: @unocss/astro। example check করুন।

Installation

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS(),
  ],
})

একটি uno.config.ts file তৈরি করুন:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Style Reset

Default হিসাবে, browser style reset inject করা হবে না। এটি enable করতে, @unocss/reset package install করুন:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

এবং আপনার astro.config.ts আপডেট করুন:

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // or a path to the reset file
    }),
  ],
})

Presets ছাড়া ব্যবহার

এই plugin-এ কোনো default presets নেই।

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

bun

bun add -D @unocss/astro

import UnoCSS from '@unocss/astro'

export default {
  integrations: [
    UnoCSS(),
  ],
}

আরো বিস্তারিত জানার জন্য, অনুগ্রহ করে Vite plugin দেখুন।

INFO

আপনি যদি UnoCSS-এর উপরে একটি meta framework build করছেন, default presets কিভাবে bind করতে হয় তার একটি example-এর জন্য এই file দেখুন।

Notes

client:only components অবশ্যই components folder-এ রাখতে হবে বা UnoCSS-এর content config-এ যোগ করতে হবে যাতে এগুলি process করা যায়।