Tailwind ဆိုတာဘာလဲ ?

What is Tailwind CSS ?

Tailwind ဆိုတာက ကိုဌေးဝင်း ကိုပြောတာမဟုတ်ပါဘူး ။

Tailwind CSS ဆိုတာ utility-first CSS framework ဖြစ်ပါတယ် ။

HTML မှာ class names တွေသုံးပြီး Styling ကို တိုက်ရိုက်ပြုလုပ်နိုင်တဲ့ CSS framework တစ်ခုပါ။

BootstraP, Bulma, Foundation တို့လို Pre-Designed ComPonents မဟုတ်ပါဘူး ။

Tailwind CSS ကိုအသုံးပြုခြင်း

Button တစ်ခုတည်ဆောက်တဲ့အခါ utility classes တွေသုံးထားတာကိုမြင်ရမှာပါ ။

နမူနာ Code အရ Class တွေကို ဖတ်တာနဲ့ ဘာ Style တွေ သုံးထားလဲဆိုတာ အကြမ်းဖြင်းအားဖြင့် သိနိုင်မှာဖြစ်ပါတယ် ။

Tailwind CSS Demo

Tailwind V3 Toolchain

Tool တစ်ခုတည်းသုံးတာမျိုးမဟုတ်ဘဲ နှစ်ခု သို့မဟုတ် ပိုများတဲ့ Tools တွေ စုပေါင်းတည်ဆောက်ခြင်းကို Toolchain လို့ခေါ်ပါတယ် ။

Tailwind V3 မှာတုန်းက ဆက်စပ် Tool တွေကို လေ့လာကြည့်ပါမယ် ။

Tailwind Config ဖိုင်ရှိမယ် ပြီးတဲ့နောက် Style တွေရေးဖို့အတွက် အဓိက css ဖိုင်တစ်ခုရှိပါမယ် ။

ဘယ်ဖိုင်တွေက tailwind css တွေ အလုပ်လုပ်မယ်ဆိုတာ tailwind.config.js ဖိုင်ထဲရှိ content ထဲမှာ သတ်မှတ်ပေးရပါတယ် ။

ဒါတွေကို Utility Generation Engine တို့ Post Css အစရှိတဲ့ Tool တွေက စောင့်ကြည့်ပြီး (Listening) လုပ်ပြီး Final CSS တွေကိုပြောင်းလဲပေးပါတယ် ။

နောက်ဆုံး Final Production Build အတွက်ကို Purge ကိုအသုံးပြုပြီး ထုတ်ပါတယ် ။

ဒီလိုနည်းနဲ့ Tailwind V3 က လည်ပတ်တာဖြစ်ပါတယ် ။

Tailwind V4 Oxide

v4 မှာ Tailwind Oxide Engine ကို သုံးထားပြီး CSS-first Configuration ဆိုပြီး ပြောင်းလဲသွားပါတယ် ။

Under the hood မှာ Rust Based နဲ့ရေးသားထားတဲ့ Lighting CSS ကို အသုံးပြုထားတဲ့အတွက် အရင်က Tailwind V2 ထက် အဆများစွာ ပိုမြန်သွားတယ် ။

ပြီးနောက် Configuration File တွေ အများကြီး မရှိတော့ဘဲ CSS တစ်ဖိုင်ထဲမှာ Config တွေကို ရေးသားရမှာပါ ။

ဒီစာအုပ်မှာ ဆက်လေ့လာသွားမှာက Tailwind v4 အသုံးပြုပြီး လေ့လာသွားမှာဖြစ်ပါတယ် ။