Wind4 preset

UnoCSS-এর জন্য Tailwind4 CSS compact preset। এটি PresetWind3-এর সমস্ত features-এর সাথে সামঞ্জস্যপূর্ণ এবং আরও উন্নত।

সোর্স কোড

TIP

আপনি পরিবর্তনগুলি বুঝতে এই documentটি পড়তে কিছু সময় ব্যয় করতে পারেন

ইনস্টলেশন

pnpm

pnpm add -D @unocss/preset-wind4

yarn

yarn add -D @unocss/preset-wind4

npm

npm install -D @unocss/preset-wind4

bun

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

সামঞ্জস্যতা

Browser support এবং সামঞ্জস্যতা সম্পর্কে জানতে Tailwind সামঞ্জস্যতা দেখুন।

Theme

PresetWind4's theme PresetWind3-এর theme-এর প্রায় অভিন্ন, কিন্তু কিছু theme keys সমন্বয় করা হয়েছে।

WARNING

PresetWind4-এ স্যুইচ করার সময়, অনুগ্রহ করে নিচের table দেখে আপনার theme key configuration চেক করুন এবং উপযুক্ত সমন্বয় করুন।

PresetWind3	PresetWind4
fontFamily	font
fontSize	text property-এ fontSize হিসাবে সরানো
lineHeight	text property-এ lineHeight হিসাবে সরানো বা leading ব্যবহার করুন
letterSpacing	text property-এ letterSpacing হিসাবে সরানো বা tracking ব্যবহার করুন
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
width, height, maxWidth, maxHeight, minWidth, minHeight-এর মতো Size properties	spacing ব্যবহার করতে unified
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults হলো একটি global default theme configuration যা reset styles-এ apply হবে বা নির্দিষ্ট rules-এর জন্য default values হিসাবে ব্যবহার হবে।

নিচে Theme.defaults-এর default values, যা আপনি আপনার theme configuration-এ override করতে পারেন।

Default values দেখতে ক্লিক করুন

import type { Theme } from '@unocss/preset-wind4/theme'

export const defaults: Theme['defaults'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

অপশন

PresetWind4-এর মৌলিক configuration PresetWind3-এর মতোই, নিচে কিছু গুরুত্বপূর্ণ পরিবর্তন।

Reset Styles

PresetWind4-এ, আমরা reset styles-কে tailwind4-এর সাথে সামঞ্জস্যপূর্ণ করেছ এবং অভ্যন্তরীণভাবে integrate করেছি। আপনাকে @unocss/reset বা normalize.css-এর মতো অতিরিক্ত CSS reset package install করতে হবে না।

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

আপনাকে শুধুমাত্র একটি switch-এর মাধ্যমে reset styles সক্ষম করতে হবে কিনা নিয়ন্ত্রণ করতে হবে:

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      reset: true, 
      // ^?
    }),
  ],
})

Utility Resolver

PresetWind4-এ, আমরা postProcess hook-কে আরও সংক্ষিপ্ত API প্রদান করতে upgrade করেছি। আপনি এখন preset-এ সরাসরি utilities customize করতে পারেন।

উদাহরণস্বরূপ, যদি আপনি rem-কে px-এ রূপান্তর করতে presetRemToPx preset ব্যবহার করতে চান, আপনাকে আর এই preset আলাদাভাবে import করতে হবে না কারণ presetWind4 এই functionality অভ্যন্তরীণভাবে প্রদান করে।

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      utilityResolver: createRemToPxResolver() 
    }),
  ],
})

আপনি আরও resolver sets customize করতে পারেন utilities process করতে এবং আপনার কাঙ্ক্ষিত CSS output করতে।

নির্দিষ্ট implementation methods-এর জন্য, অনুগ্রহ করে postProcess বা presetWind4 test case দেখুন

Theme Preflight

Theme CSS variables কীভাবে generate করতে হবে তা চয়ন করুন।

presetWind4 installed সহ UnoCSS engine utilities parse করার সময় theme-এর dependencies স্বয়ংক্রিয়ভাবে সংগ্রহ করবে এবং শেষে CSS variables generate করবে।

• true: সম্পূর্ণ theme keys generate করুন।
• false: theme keys disable করুন। (সুপারিশ করা হয় না ⚠️)
• `'on-demand'**: শুধুমাত্র ব্যবহার হলে theme keys generate করুন। -> ✅ (ডিফল্টভাবে)

Generated CSS

PresetWind4-এর output-এ, দুটি নতুন layers যোগ করা হয়েছে: theme এবং cssvar-property।

Layer Name	Description	order
cssvar-property	@property দ্বারা সংজ্ঞায়িত CSS properties	-200
theme	Theme-সম্পর্কিত CSS variables	-150

cssvar-property Layer

আমরা @property ব্যবহার করে অনেক rules-এ CSS properties সংজ্ঞায়িত করেছি আরও ভালো performance এবং ছোট size অর্জন করতে।

উদাহরণস্বরূপ, text-op-xx, bg-op-xx, ইত্যাদির মতো commonly used utilities।

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

theme Layer

আমরা theme-সম্পর্কিত CSS variables theme layer-এ রেখেছি যাতে আপনার জন্য সেগুলি override এবং সরাসরি ব্যবহার করা সহজ হয়। এটি comprehensive বা on-demand হতে পারে। এটি সবসময় আপনার theme configuration থেকে আসে।

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

অন্যান্য Presets-এর সাথে সামঞ্জস্যতা

PresetWind4 উন্নত এবং PresetWind3-এর সাথে সামঞ্জস্যপূর্ণ। যেহেতু অন্যান্য packages মূলত PresetWind3-এর জন্য তৈরি করা হয়েছিল, সেগুলিকে একসাথে ব্যবহার করার সময় কিছু সমস্যা হতে পারে। জানা সমস্যাগুলির মধ্যে রয়েছে:

presetWebFonts

PresetWind4-এর সাথে presetWebFonts ব্যবহার করার সময়, fontFamily theme key আর সমর্থন করা হয় না। অনুগ্রহ করে নিম্নলিখিত সমন্বয় করুন:

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetWebFonts({
      themeKey: 'font', 
      // ^?
    }),
  ],
})

presetLegacyCompat

presetWind4-এ, আমরা আরও ভালো color contrast এবং color perception সমর্থন করতে oklch color model ব্যবহার করি। তাই, এটি presetLegacyCompat-এর সাথে সামঞ্জস্যপূর্ণ নয় এবং একসাথে ব্যবহার করা সুপারিশ করা হয় না।

আরও তথ্যের জন্য সামঞ্জস্যতা section দেখুন।

transformDirectives

transformDirectives PresetWind4-এর সাথে ভালো কাজ করে না। কিছু জানা সমস্যা আছে, তাই দয়া করে এটি সতর্কতার সাথে ব্যবহার করুন।

WARNING

• @property সহ rules process করতে @apply ব্যবহার করার সময়, বিভিন্ন layer levels-এর মধ্যে দ্বন্দ্ব হতে পারে।