Tailwind CSS: လျင်မြန်၊ တုံ့ပြန်မှုရှိသောဒီဇိုင်းအတွက် Utility-First CSS Framework နှင့် API

Taiwind CSS Framework

ကျွန်ုပ်သည်နေ့စဉ်နှင့်အမျှနည်းပညာ၌နက်ရှိုင်းနေသော်လည်းကျွန်ုပ်၏ကုမ္ပဏီသည်ဖောက်သည်များအတွက်သုံးသောရှုပ်ထွေးသောပေါင်းစည်းမှုများနှင့်အလိုအလျောက်ကိုမျှဝေလိုသဖြင့်အချိန်များစွာမရပေ။ ကောင်းပြီ၊ ငါရှာဖွေတွေ့ရှိချိန်အများကြီးမရှိဘူး။ ငါရေးသောနည်းပညာအများစုသည်ရှာဖွေသောကုမ္ပဏီများဖြစ်သည် Martech Zone သူတို့ကိုဖုံးအုပ်တယ်၊ ဒါပေမယ့်ခဏတိုင်း - အထူးသဖြင့် Twitter ကငါဝေမျှလိုတဲ့နည်းပညာအသစ်တစ်ဝိုက်မှာအသံအချို့ကိုငါတွေ့တယ်။

မင်း web design, mobile app development, ဒါမှမဟုတ် content management system တစ်ခုလောက်ထူထောင်လိုက်ရင်မင်းစတိုင်လ်စာရွက်များစွာမှာယှဉ်ပြိုင်တဲ့စတိုင်လ်တွေရဲ့မကျေနပ်ချက်တွေနဲ့လုံးထွေးနေလိမ့်မယ်။ browser တစ်ခုစီ၌တည်ဆောက်ထားသောအံ့သြဖွယ်တိုးတက်ရေးကိရိယာများနှင့်ပင် CSS ကိုခြေရာခံခြင်းနှင့်သန့်ရှင်းရေးလုပ်ခြင်းသည်အချိန်နှင့်စွမ်းအင်များစွာလိုအပ်နိုင်သည်။

CSS Frameworks

မကြာသေးမီနှစ်များအတွင်းဒီဇိုင်နာများသည်ကြိုတင်ပြင်ဆင်ပြီးသုံးရန်အဆင်သင့်ဖြစ်သောစတိုင်လ်စုဆောင်းမှုများကိုဖြန့်ချိရာတွင်အံ့သြဖွယ်ကောင်းသောအလုပ်ကိုလုပ်ခဲ့သည်။ ဤ CSS Stylesheets များသည် CSS Frameworks များဟုလူသိများပြီးကွဲပြားသောပုံစံများနှင့်တုံ့ပြန်မှုစွမ်းရည်များအားလုံးကိုလိုက်လျောညီထွေဖြစ်အောင်ကြိုးစားနေသောကြောင့် developer များသည် CSS ဖိုင်ကိုအစကနေတည်ဆောက်ခြင်းထက်မူဘောင်တစ်ခုကိုကိုးကားနိုင်အောင်ကြိုးစားသည်။ လူကြိုက်များသောမူဘောင်အချို့မှာ -

  • bootstrap ဆယ်စုနှစ်တစ်ခုအတွင်းတိုးတက်ပြောင်းလဲလာသောမူဘောင်တစ်ခုကို Twitter မှပထမဆုံးမိတ်ဆက်သည်။ ၎င်းတွင်မရေမတွက်နိုင်သောအင်္ဂါရပ်များပါ ၀ င်သည်။ ၎င်းတွင် SASS လိုအပ်ခြင်း၊ ပြန်လည်ဖော်ပြရန်ခက်ခဲခြင်း၊ JQquery ကိုမှီခိုခြင်း၊ ၎င်းကိုတင်ရန်အတော်လေးခက်ခဲသည်။
  • ရှာပါ -developer များအတွက်အဆင်ပြေပြီး JavaScript ပေါ်တွင်မှီခိုမှုမရှိသောသန့်ရှင်းသောမူဘောင်
  • ဖောင်ဒေးရှင်း အလွယ်တကူစိတ်ကြိုက်ပြုပြင်နိုင်သောအစိတ်အပိုင်းများစွာပါ ၀ င်သောပိုမိုအသုံး ၀ င်သော CSS မူဘောင် ဒါ့အပြင်၊ ရှိပါတယ် အီးမေးလ်အတွက်ဖောင်ဒေးရှင်း နှင့် motion UI ကို animations တွေအတွက်
  • UIKit -သင်၏ front-end ကိုလျင်မြန်လွယ်ကူစွာတိုးတက်စေရန် HTML, JavaScript နှင့် CSS တို့ကိုပေါင်းစပ်ပါ။

Taiwind CSS Framework

အခြားမူဘောင်များသည်လူကြိုက်များသော user interface အစိတ်အပိုင်းများကိုနေရာပေးရန်အလွန်ကောင်းသောအလုပ်ကိုလုပ်ဆောင်နေစဉ် Tailwind သည်လူသိများသောနည်းစနစ်တစ်ခုကိုအသုံးပြုသည် အက်တမ် CSSမရ။ အတိုချုပ်အားဖြင့် Tailwind သည်သူတို့ပြောဆိုရာကိုလုပ်ရန်သဘာဝဘာသာစကား သုံး၍ အတန်းအမည်များကိုလိမ္မာပါးနပ်စွာစုစည်းခဲ့သည်။ ထို့ကြောင့် Tailwind တွင်အစိတ်အပိုင်းများစာကြည့်တိုက်မရှိသော်လည်း၊ CSS အတန်းအမည်များကိုရည်ညွှန်းခြင်းဖြင့်သာလျင်၊ အားကောင်းသော၊ တုန့်ပြန်နိုင်သော interface တစ်ခုကိုလွယ်လွယ်ကူကူတည်ဆောက်နိုင်မှုသည်ကြော့ရှင်း၊ မြန်ဆန်ပြီးအနှိုင်းမဲ့ဖြစ်သည်။

ဒါတွေကတော့တကယ်ကောင်းတဲ့ဥပမာအချို့ပါ။

CSS Grids များ

css column သည် start grids ကော်လံများဖြစ်သည်

CSS Gradient များ

css gradient များ

Dark Mode Support အတွက် CSS

css အမှောင် mode

Tailwind မှာလည်းထူးဆန်းတာတစ်ခုရှိတယ် extension ရရှိနိုင်ပါသည် VS Code အတွက်သင် Microsoft ၏ကုဒ်အယ်ဒီတာမှအတန်းများကိုလွယ်ကူစွာခွဲခြားသတ်မှတ်ထည့်သွင်းနိုင်ရန်အတွက်။

ပို၍ ပင်ပညာသားပါပါ၊ Tailwind သည်ထုတ်လုပ်မှုအတွက်တည်ဆောက်ရာတွင်အသုံးမ ၀ င်သော CSS အားလုံးကိုအလိုအလျောက်ဖယ်ရှားသည်၊ ဆိုလိုသည်မှာသင်၏နောက်ဆုံး CSS အစုအဝေးသည်ဖြစ်နိုင်သမျှအသေးငယ်ဆုံးဖြစ်သည်။ အမှန်အားဖြင့် Tailwind ပရောဂျက်အများစုသည် CSS သို့ 10kB အောက်သာပို့သည်။

သင်ဘယ်လိုထင်ပါလဲ?

ဤ site ကိုစပမ်လျှော့ချဖို့ Akismet ကိုအသုံးပြုသည်။ သင့်ရဲ့ comment ကိုဒေတာများကိုဆောင်ရွက်ပြီးဖြစ်ပါတယ်လေ့လာ.