Mini preset

শুধুমাত্র সবচেয়ে essential utilities সহ UnoCSS-এর জন্য মৌলিক preset।

সোর্স কোড

ইনস্টলেশন

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

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

TIP

এই preset unocss প্যাকেজে অন্তর্ভুক্ত, আপনি সেখান থেকেও import করতে পারেন:

import { presetMini } from 'unocss'

Rules

এই preset @unocss/preset-wind3-এর একটি subset, যেটিতে শুধুমাত্র CSS-এর properties-এর সাথে সামঞ্জস্যপূর্ণ সবচেয়ে essential utilities আছে, কিন্তু Tailwind CSS-এর opinionated বা complicated utilities (container, animation, gradient ইত্যাদি) বাদ দেওয়া হয়েছে। এটি Tailwind CSS বা Windi CSS-এর familiar utilities-এর উপর আপনার নিজের custom preset-এর জন্য একটি ভালো starting point হতে পারে।

Features

Dark mode

ডিফল্টভাবে, এই preset dark: variant সহ class-based dark mode generate করে।

<div class="dark:bg-red:10" />

generate করবে:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

Media query based dark mode

পরিবর্তে সার্বজনীনভাবে media query based dark mode ব্যবহার করতে, আপনি dark: variant-এর জন্য config পরিবর্তন করতে পারেন:

presetMini({
  dark: 'media'
})

এখন

<div class="dark:bg-red:10" />

generate করবে:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

CSS @layer

CSS-এর native @layer layer-xx: variant দিয়ে সমর্থন করা হয়।

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

generate করবে:

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

Theme

আপনি সম্পূর্ণভাবে আপনার config-এ theme property customize করতে পারেন, এবং UnoCSS অবশেষে এটিকে default theme-এ deeply merge করবে।

WARNING

breakpoints property deeply merge হয় না, বরং override হয়, Breakpoints দেখুন।

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

অপশন

dark

• Type: class | media | DarkModeSelectors
• Default: class

Dark mode options। এটি হতে পারে class, media, বা একটি custom selector object (DarkModeSelectors)।

interface DarkModeSelectors {
  /**
   * Selector for light variant.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selector for dark variant.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Type: Boolean
• Default: false

Pseudo selector [group=""] generate করুন .group-এর পরিবর্তে।

variablePrefix

• Type: string
• Default: un-

CSS custom properties-এর জন্য prefix।

prefix

• Type: string | string[]
• Default: undefined

Utils prefix।

preflight

• Type: boolean | on-demand
• Default: true

Preflight css generate করুন। এটি হতে পারে:

• true: সবসময় preflight generate করুন।
• false: কোনো preflight নয়।
• on-demand: ব্যবহৃত utilities-এর জন্য শুধুমাত্র preflight generate করুন।