မဂၤလာပါခင္ဗ်ာ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ Web Designer အျဖစ္ ဝင္ေရာက္ လုပ္ကိုင္လ်က္ရွိေသာ ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္။ ဒီေန႔ ကြၽန္ေတာ္မွ်ေဝေပးခ်င္ေသာ အေၾကာင္းအရာေလးကေတာ့ Tailwindcss Framework Installation  ေလးပဲ ျဖစ္ပါတယ္။

၎ကို full-stack developer Adam Wathan က Develop လုပ္တာျဖစ္ၿပီး November 1, 2017 မွာ version 1.0 ကို release လုပ္ခဲ့တာျဖစ္ပါတယ္။ Version 2.0 ကို‌ေတာ့ November 19, 2020 မွာ release လုပ္ႏိုင္ခဲ့ပါတယ္။

What is Tailwindcss?
Tailwindcss ဆိုသည္မွာ Website design နဲ႔ပတ္သက္ၿပီး မည္သည့္ design ကို မဆို အလြယ္တကူ customize လုပ္ၿပီး အသုံးျပဳႏိုင္ရန္ utilities classes မ်ားကို အေျခခံတည္ေဆာက္ထားေသာ A Utility-First CSS framework တစ္ခုျဖစ္ပါတယ္။
Tailwindcss framework ကို ေအာက္ပါ frameworks မ်ားမွာလည္းစတင္ထည့္သြင္းအသုံးျပဳႏိုင္ပါတယ္။

Tailwindcss framework ကို အသုံးျပဳဖို႔ဆိုရင္ နည္းလမ္း(၂)မ်ိဳးျဖင့္ အသုံးျပဳႏိုင္ပါတယ္။ ပထမနည္းလမ္းကေတာ့ NPM (Node Package Manager) ကို အသုံးျပဳၿပီး install ျပဳလုပ္ျခင္းျဖစ္ပါတယ္။ ဒုတိယနည္းလမ္းကေတာ့ minimize လုပ္ထားေသာ tailwindcss CDN ကို အသုံးျပဳျခင္းျဖစ္ပါတယ္။
https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css
Minimize ျပဳလုပ္ထားေသာ tailwindcss CDN link ကို အသုံးျပဳလွ်င္ disadvantages မ်ားရွိပါတယ္။ CSS code မ်ားကို customize လုပ္လို႔မရႏိုင္ျခင္း၊ directives ျဖစ္ေသာ @apply ႏွင့္ @variants မ်ားအသုံးမျပဳႏိုင္ျခင္း၊ လိုအပ္ေသာ plugin မ်ားကိုထည့္သြင္း အသုံးျပဳမရတာေၾကာင့္ CDN ကိုအသုံးမျပဳဖို႔ ေအာက္က link မွာအႀကံျပဳထားပါတယ္။
https://tailwindcss.com/docs/installation

ဒါေၾကာင့္ minimize လုပ္ထားေသာ CDN link ကိုအသုံးမျပဳဘဲ NPM(Node Package Manager) ကို အသုံးျပဳၿပီး install ျပဳလုပ္ပုံ အဆင့္ဆင့္ကို ေျပာျပသြားမွာျဖစ္ပါတယ္။
ပထမဦးဆုံး node.js ကို download လုပ္ၿပီး install တင္ရန္လိုအပ္ပါတယ္။ Node.js ကို nodejs.org မွာ download ရယူႏိုင္ပါတယ္။ Node.js ကို install လုပ္လိုက္ရင္ NPM က တစ္ခါတည္း ပါဝင္လာမည္ ျဖစ္ပါသည္။

Node.js ႏွင့္ NPM ကို install လုပ္ၿပီးေနာက္ မိမိစက္ထဲတြင္ installation success ျဖစ္မျဖစ္ command prompt (သို႔မဟုတ္) terminal ကို ဖြင့္ၿပီး အခုလို စစ္ၾကည့္ႏိုင္ပါတယ္။

>> node -v
>> npm -v

ေအာက္ပါပုံ အတိုင္း version ေပၚလာရင္ installation လုပ္တာ ေအာင္ျမင္ပါသည္။

 Install tailwind css

ပထမအဆင့္အေနနဲ႔ မိမိႏွစ္သက္ရာ အမည္နဲ႔ folder တစ္ခု ေဆာက္ပါ။ အဲ့ဒီ folder ထဲမွာ index file တစ္ခု ေဆာက္ၿပီး terminal ကိုဖြင့္ပါ။
Terminal ဖြင့္ၿပီး folder ကို npm package folder ျဖစ္ေစရန္ႏွင့္ package.json file ရရွိရန္ ေအာက္ပါ အတိုင္း terminal မွာ run ရပါမည္။

>>npm init -y

ပုံပါအတိုင္း package.json file ဝင္လာတာကိုေတြ႕ရပါမည္။

ထို႔ေနာက္ NPM ကို အသုံးျပဳၿပီး terminal တြင္

>>npm install tailwindcss postcss autoprefixer

run ၿပီး Tailwindcss ကို install လုပ္ရမွာျဖစ္ပါတယ္။ ပုံပါအတိုင္း node_modules ႏွင့္ package-lock.json file ဝင္လာတာကိုေတြ႕ရပါမည္။

Tailwindcss installation တြင္  PostCSS  နည္းပညာကိုအသုံးျပဳထားၿပီး Autoprefixer plugin ကို အသုံးျပဳထားတာျဖစ္ပါတယ္။
Tailwindcss install လုပ္ၿပီးေနာက္ Tailwindcss run ဖို႔ရန္ NPX (Node Package Execute) ကို အသုံးျပဳၿပီး ေအာက္ပါအတိုင္း terminal မွာ run ရပါမည္။

>>npx tailwindcss init

Tailwindcss ကို run ၿပီးေနာက္ tailwind.config.js file ဝင္လာပါလိမ့္မည္။

Create custom css create
ေနာက္တဆင့္အေနျဖင့္ မိမိႏွစ္သက္ရာနာမည္ျဖင့္ CSS တစ္ဖိုင္တည္ေဆာက္ရပါမည္။ ကြၽန္ေတာ္ကေတာ့ style.css ဆိုၿပီး CSS file တည္ေဆာက္ထားပါသည္။

 

CSS file ထဲမွာ Tailwindcss framework ကေပးထားေသာ directive tailwindcss (၃) မ်ိဳးကိုအသုံးျပဳၿပီးေရးသားပါမည္။
၎(၃)မ်ိဳးမွာ @tailwind base, @tailwind components ႏွင့္ @tailwind utilities တို႔ျဖစ္ပါသည္။ style.css ထဲတြင္ ေအာက္ပါအတိုင္း code (၃) ေၾကာင္းေရးသားပါမည္။

ထို႔ေနာက္ tailwindcss ကို အသုံးျပဳၿပီး style.css ကို compile လုပ္ပါမည္။
Terminal မွာ

>>npx tailwindcss build style.css -o tailwind.css

style.css ကို compile လုပ္ၿပီး ရရွိလာေသာ css အားလုံးကို output အေနျဖင့္ tailwind.css file တည္ေဆာက္လိုက္ပါမည္။
ထို႔ေနာက္ compile လုပ္ၿပီး ရရွိလာေသာ tailwind.css file ကို link ခ်ိတ္ အသုံးျပဳၿပီး code မ်ားကို စတင္ေရးသားႏိုင္မည္ျဖစ္ပါတယ္။

Code editor tool Visual studio code ကို အသုံးျပဳၿပီး code မ်ားကို စတင္ေရးသားရာတြင္ utilities classes မ်ားကို hint အေနျဖင့္ အသုံးျပဳရလြယ္ကူေစရန္ tailwindcss IntelliSense extension ကို install လုပ္ရန္ အႀကံျပဳထားပါတယ္ခင္ဗ်။ ဒါေၾကာင့္ Visual studio code > setting > extension မွာ install လုပ္ အသုံးျပဳႏိုင္ပါသည္။

Tailwindcss IntelliSense ကိုအသုံးျပဳၿပီး ေရးသားရာတြင္ (ဥပမာ- bg-teal-50) ႐ိုက္လိုက္ရင္ bg-teal ႏွင့္သက္ဆိုင္ေသာ utilities classes မ်ားကို အလြယ္တကူ အသုံးျပဳႏိုင္မွာျဖစ္ပါသည္။

Tailwindcss မွာ ပါရွိေသာ utilities classes အသုံးျပဳပုံ အေသးစိတ္ကို ေလ့လာခ်င္ရင္ျဖင့္ ေအာက္ပါလင့္ခ္မွ တစ္ဆင့္ ဝင္ေရာက္ေလ့လာႏိုင္ပါတယ္ခင္ဗ်။
https://tailwindcss.com/docs/container
အခု ကြၽန္ေတာ္ မွ်ေဝတဲ့ Tailwind CSS အေၾကာင္းကို ဖတ္ရႈၿပီး တစ္ခုခု အက်ိဳးရွိသြားမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ အခ်ိန္ေပး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။