ဒီတစ်ပတ်မှာတော့ “Tailwind CSS” နဲ့ပက်သက်ပြီး sharingလုပ်ပေးသွားမှာဖြစ်ပါတယ်။ ညီမကတော့ Spiceworks Myanmar မှာ Junior Web Designer အနေနဲ့တာဝန်ယူလုပ်ကိုင်နေတဲ့ ခိုင်သဉ္ဇာသွယ်ဖြစ်ပါတယ်။
ပထမဆုံးအနေနဲ့ ဒီ video လေးတွေကို ကြည့်ထားသင့်ပါတယ်။
Tailwind CSS Installation via Setup CLI – https://youtu.be/7vrJRo8o4Fs?si=YJfk6PaTLd8GnuM6
Tailwind CSS Font – https://youtu.be/tRSqWwfE0CY?si=z0MFcPy6-iLaIXja
Tailwind CSS Flex – https://youtu.be/q-mURRZcbQI?si=ZcYsopoLbAVpvV_t
ဒါ့အပြင် Colors, Spacing နဲ့ Borders တွေအကြောင်းကို ဆက်ပြီးလေ့လာကြပါမယ်။
Colors
Tailwind CSS မှာ သူ့ရဲ့မူရင်းသတ်မှတ်ထားပြီးသား colors တွေက တော်တော်စုံစုံလင်လင်ရှိပါတယ်။ ဥပမာအနေနဲ့ အောက်ပါအတိုင်းအသုံးပြုနိုင်ပါတယ်။
<h2 class="text-4xl text-red-400">Hi! It's me.</h2>
how to customize your color
ကိုယ်လိုချင်တဲ့အရောင်ကို သတ်မှတ်ချင်ရင် themes ထဲမှာ အောက်ပါအတိုင်း သတ်မှတ်နိုင်ပါတယ်။
@theme {
--color-drak-green: #363E27;
--color-brick-red: #B22428;
--color-eggshell: #F3EBD6;
}
Spacing
spacing မှာ margin နဲ့ padding ဆိုပြီး (2) မျိုးရှိပါတယ်။
padding
p – number က top, right, bottom, left အကုန်လုံးစာ အလုပ်လုပ်သွားတာ ဖြစ်ပါတယ်။
pt က padding top
pr က padding right
pb က padding bottom
pl က padding left ဖြစ်ပါတယ်။ နောက်ကနေ number ထည့်ပေးရုံပါပဲ။
ဒါ့အပြင် horizontal အတွက်ဆို px, vertical အတွက်ဆို py သုံးလို့ရပါတယ်။
margin
margin ကလည်း m – number ဆိုပြီးသုံးလို့ရပါတယ်။ padding နဲ့သဘောတရားအတူတူပဲမလို့ အသေးစိတ် ထပ်မဖော်ပြတော့ပါ။
padding နဲ့ margin မှာ တခြားအသုံးပြုလို့ရတဲ့ နည်းလမ်းတွေရှိသေးပေမယ့် ဒီနေ့တော့ ဒီလောက်ပဲဖော်ပြသွားပါ့မယ်။
Borders
border နဲ့ပက်သက်ပြီး border-width, border-color, border-style နဲ့ border-radius တို့ကိုပြောပြသွားပါ့မယ်။
border width
border- number ဆိုပြီးသုံးပါတယ်။ number နေရာမှာ ကိုယ်ကြိုက်တဲ့ number ထည့်လို့ရပါတယ်။
border color
border နောက်မှာ color name ထည့်ပေးရုံပါပဲ။ ဥပမာ – border-lime-500, border-indigo-700 အစရှိသဖြင့် သုံးနိုင်ပါတယ်။ ကိုယ့်ရဲ့ customize color ကိုလည်းအသုံးပြုနိုင်ပါတယ်။
border style
border-solid, border-dashed, border-dotted အစရှိသဖြင့် ကိုယ်ကြိုက်တဲ့ style ကိုအသုံးပြုနိုင်ပါတယ်။
border radius
rounded-xs, rounded-sm, rounded-md အစရှိသဖြင့်အသုံးပြုနိုင်ပါတယ်။
အောက်မှာဖော်ပြထားတဲ့ card project မှာသုံးထားတာကိုလည်းကြည့်နိုင်ပါတယ်။
Mini Project – Card
အထက်မှာဖော်ပြထားတဲ့ video ထဲက knowledge တွေအပြင် Colors, Spacing နဲ့ Borders တို့ကိုပါအသုံးချပြီး card project လေး ရေးထားတာဖြစ်ပါတယ်။
အောက်ပါ code ကို run ကြည့်ပါ။
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS</title> <link rel="stylesheet" href="/src/output.css"> </head> <body> <div class="container mx-auto pt-8 font-lilita"> <h2 class="text-3xl text-drak-green mb-8">Christamas Rules</h2> <div class="flex flex-row"> <div class="basis-1/3 bg-eggshell p-10"> <h3 class="text-2xl text-drak-green mb-4">Rule 01</h3> <p class="text-base text-drak-green">Be happy</p> </div> <div class="basis-1/3 bg-drak-green p-10"> <h3 class="text-2xl text-white mb-4">Rule 02</h3> <p class="text-base text-white">Don't catch a cold</p> </div> <div class="basis-1/3 bg-brick-red p-10"> <h3 class="text-2xl text-eggshell mb-4">Rule 03</h3> <p class="text-base text-eggshell">Stress off, Coffee On</p> </div> </div> </div> <div class="container mx-auto pt-8 font-lilita"> <h2 class="text-3xl text-drak-green mb-8">Christamas Rules</h2> <div class="flex flex-row"> <div class="basis-1/3 p-10 border-2 border-brick-red border-dashed"> <h3 class="text-2xl mb-4">Rule 01</h3> <p class="text-base">Be happy</p> </div> <div class="basis-1/3 p-10 border-4 border-drak-green rounded-2xl"> <h3 class="text-2xl mb-4">Rule 02</h3> <p class="text-base">Don't catch a cold</p> </div> <div class="basis-1/3 p-10 border-6 border-eggshell border-double"> <h3 class="text-2xl mb-4">Rule 03</h3> <p class="text-base">Stress off, Coffee On</p> </div> </div> </div> </body> </html>
layout ကတော့ အခုလိုပေါ်မှာ ဖြစ်ပါတယ်။
အဆုံးထိဖတ်ရှူပေးလို့ ကျေးဇူးတင်ပါတယ်။
ပိုပြီးအသေးစိတ် လေ့လာချင်ရင် Tailwind CSS documentations မှာ လေ့လာနိုင်ပါတယ်။
https://tailwindcss.com/docs/installation/using-vite
