Wind3 preset

UnoCSS-এর জন্য Tailwind CSS / Windi CSS compact preset।

সোর্স কোড

INFO

@unocss/preset-wind এবং @unocss/preset-uno deprecated এবং @unocss/preset-wind3-এ rename করা হয়েছে। এই preset @unocss/preset-mini-থেকে inherit করে।

ইনস্টলেশন

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

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

TIP

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

import { presetWind3 } from 'unocss'

Rules

এই preset-এর প্রাথমিক লক্ষ্য Tailwind CSS এবং Windi CSS-এর সাথে compatibility প্রদান করা। এটি লক্ষ্য করা উচিত যে সম্পূর্ণ compatibility guaranteed নাও হতে পারে। বিস্তারিত ব্যবহারের জন্য তাদের documentation দেখুন।

এই preset-এ অন্তর্ভুক্ত সমস্ত rules এবং presets-এর জন্য, অনুগ্রহ করে আমাদের interactive docs বা সরাসরি source code দেখুন।

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 পরিবর্তন করতে পারেন:

presetWind3({
  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);
  }
}

Opt-in media query based dark mode

Opt-in media query based dark mode ব্যবহার করতে, আপনি @dark: variant ব্যবহার করতে পারেন:

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

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

Tailwind CSS থেকে পার্থক্য

Quotes

Extractor-এর কাজের পদ্ধতির কারণে template-এ (যে files process করা হবে) quotes ব্যবহার সমর্থিত নয়। যেমন আপনি before:content-[''] লিখতে পারবেন না। এই ক্ষেত্রে, আপনি এমন একটি নতুন utility চালু করতে পারেন যা আপনি স্পষ্টভাবে সেট করতে পারেন যেমন class="before:content-empty"।

background-position with arbitrary values

Tailwind অনুমতি দেয় custom values background-position-এর জন্য bare syntax ব্যবহার করতে:

<div class="bg-[center_top_1rem]"></div>

Wind preset এর পরিবর্তে center_top_1rem-কে একটি color হিসাবে interpret করবে। একই জিনিস অর্জন করতে position: prefix ব্যবহার করুন:

<div class="bg-[position:center_top_1rem]"></div>

Animates

Tailwind CSS-এ কম built-in animations আছে, আমরা এর animation rules সম্পূর্ণরূপে সমর্থন করি, এবং আরও animation effects প্রদান করতে অভ্যন্তরীণভাবে Animate.css integrate করি।

আপনি দ্রুত প্রয়োজনীয় animation খুঁজতে IntelliSense-কে গাইড করতে animate- prefix ব্যবহার করতে পারেন।

TIP

আমরা Tailwind এবং Animate.css থেকে conflicting animation names merge করি না। আপনি যদি Animate.css থেকে animation name ব্যবহার করতে চান, অনুগ্রহ করে animate-<name>-alt ব্যবহার করুন।

উদাহরণস্বরূপ

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

আপনি animation effect customize বা modify করতে চাইলে, আমরা highly customizable configuration items প্রদান করি। আপনি configuration item-এর মাধ্যমে animation-এর duration, delay, speed curve ইত্যাদি modify করতে পারেন।

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

Custom animation preview করুন:

animate-custom

TIP

আপনি animation গুলিকে ভালোভাবে পরিচালনা করতে category যোগ করতে পারেন। এটি downstream tools-এর জন্য animation effects consume করা সহজ করবে।

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

Windi CSS থেকে পার্থক্য

Breakpoints

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

Bracket syntax spaces

এই preset bracket syntax-এ space সম্মান করতে _ এর পরিবর্তে , ব্যবহার করে।

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

যেহেতু কিছু CSS rules-এ value-এর অংশ হিসাবে , প্রয়োজন, যেমন grid-cols-[repeat(3,auto)]

Experimental Features

WARNING

এই preset-এ experimental features অন্তর্ভুক্ত যা যেকোনো সময় breaking ways-এ পরিবর্তন করা যেতে পারে।

Media Hover

Media hover sticky hover সমস্যার সমাধান করে যেখানে mobile-এ hover style সহ target-এ tap করলে অন্য কোথাও tap না করা পর্যন্ত সেই hover style বজায় থাকে।

যেহেতু regular :hover style সম্ভবত এত widely ব্যবহৃত হয়, variant regular hover pseudo থেকে পৃথক করতে @hover syntax ব্যবহার করে।

@hover-text-red variant output করবে:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

অপশন

INFO

এই preset options @unocss/preset-mini-থেকে inherit করে।

important

• Type: boolean | string
• Default: false

important option আপনাকে নিয়ন্ত্রণ করতে দেয় যে UnoCSS-এর utilities !important দিয়ে marked হওয়া উচিত কিনা। এটি তখনই সত্যিই দরকারী হতে পারে যখন UnoCSS-কে high specificity selectors সহ বিদ্যমান CSS-এর সাথে ব্যবহার করা হচ্ছে।

WARNING

এই option ব্যবহার করলে UnoCSS-এর দ্বারা generate সমস্ত utilities-এ important apply হবে। আপনি যদি শুধুমাত্র নির্দিষ্ট utilities-এ apply করতে চান তাহলে important: variant ব্যবহার করতে পারেন।

যাইহোক, true তে important সেট করলে কিছু সমস্যা হতে পারে যখন third-party JS libraries-কে incorporate করা হচ্ছে যা আপনার elements-এ inline styles যোগ করে। সেই ক্ষেত্রে, UnoCSS-এর !important utilities inline styles-কে defeat করে, যা আপনার intended design ভাঙতে পারে।

এটি এড়াতে, আপনি #app এর মতো ID selector-এ important সেট করতে পারেন:

import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

এই configuration আপনার সমস্ত utilities দেওয়া selector দিয়ে prefix করবে, কার্যকরভাবে তাদের specificity বাড়াবে without actually making them !important।

dark:bg-blue utility output করবে:

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}