Tailwind CSS Installation

မင်္ဂလာပါ။ TailwindCSS install ပြုလုပ်ပုံ အဆင့်ဆင့်ကို ပြသသွားမှာ ဖြစ်ပါတယ်။

ကျွန်တော်တို့တွေ အသုံးများကြတဲ့ CSS frameworkတစ်ခုဖြစ်တဲ့ Bootstrap လိုဘဲ Tailwindမှာလည်း CDNရှိပါတယ်။ သို့သော် ကန့်သတ်ချက်တွေ အရမ်းများတဲ့အတွက် npm (Node Package Manager) နဲ့ installတင်သုံးမှသာလျှင် frameworkကို ရာနှုန်းပြည့်ထိတွေ့ကိုင်တွယ်နိုင်မှာဖြစ်ပါတယ်။

npm ဆိုတဲ့အတွက် ကျွန်တော်တို့က Node JS ကို installတင်ထားမှသာလျှင် npmကိုအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။ Node JS ဒီ link မှာ downloadနိုင်ပြီး guideလိုတယ်ဆိုရင် အောက်ပါ YouTube videoကိုကြည့်ရှုနိုင်ပါတယ်။

https://youtu.be/JINE4D0Syqw

Guide for NodeJS installation

Node JS installတင်ပြီးပြီဆိုရင် TailwindCSS installationကိုအဆင့်ဆင့်ပြုလုပ်သွားပါမယ်။ အသုံးပြုမယ့် project folderရဲ့ directoryကို terminal နဲ့ဖွင့်ပြီး commandတွေနဲ့ installတင်သွားပါမယ်။ ဒါမှမဟုတ် VS Codeနဲ့ project folderဖွင့်ပြီး terminalခေါ်လည်းရပါတယ်။

Step 1 → npm init command နဲ့ npm ကို initializeလုပ်ပါမယ်။

1$ npm init
2version: (1.0.0)
3description:
4entry point: (index.js)
5test command:
6git repository:
7keywords:
8author:
9license: (ISC)
10About to write to E:\_writings\tailwind-installation\package.json:
11{
12"name": "tailwind-installation",
13"version": "1.0.0",
14"description": "",
15"main": "index.js",
16"scripts": {
17"test": "echo \"Error: no test specified\" && exit 1"
18},
19"author": "",
20"license": "ISC"
21}
22Is this OK? (yes) y

ပြီးတာနဲ့ project folderထဲမှာ package.json fileကို တည်ဆောက်ပေးသွားမှာဖြစ်ပါတယ်။

Step 2 → npm install tailwindcss@latest postcss@latest autoprefixer@latest

အထက်ပါ commandနဲ့ tailwind css, postcss နဲ့ css post processor တခုဖြစ်တဲ့ autoprefixerတို့ကို installလုပ်သွားပါမယ်။

Step 3 → TailwindCSS ကို initializeလုပ်ပါမယ်။

1npx tailwindcss init

(သို့မဟုတ်)

1npx tailwindcss init --full

အထက်ပါ commandတွေကနေ tailwind.config.js fileကိုထုတ်သွားပေးမှာဖြစ်ပြီး full ပါတဲ့ commandကတော့ module အပြည့်အစုံကို tailwind.config.js ထဲမှာပြသထားမှာဖြစ်ပါတယ်။

ပထမ commandကို runလျှင် အောက်ပါအတိုင်းထွက်မှာဖြစ်ပြီး…

npm tailwindcss init (result)

ဒုတိယ commandကတော့ အောက်ပါအတိုင်း ထွက်စေမှာဖြစ်ပါတယ်။

npm tailwindcss init — full (result)

Step 4 → TailwindCSS ကို CSS file တခုအဖြစ်တည်ဆောက်ပါမယ်။

Tailwind utility classတွေပါဝင်တဲ့ build fileတည်ဆောက်ဖို့ project folderထဲမှာ css/build.css ဆိုပြီး folder နဲ့fileကိုတည်ဆောက်လိုက်ပါတယ်။ Folder structureကိုတော့ ကိုယ့်အထာနဲ့ကိုယ်တည်ဆောက်နိုင်ပါတယ်။ အရေးကြီးတာ css fileရှိဖို့ပါ။

build.css နေရာမှာ ကြိုက်တဲ့ nameပေးလို့ရပါတယ်။ပြီးတဲ့နောက် အဲ့ css fileထဲမှာဘဲbase, components, utilities တွေကို တည်ဆောက်တဲ့အခါပါဝင်ဖို့ ထည့်သွင်းဖော်ပြလိုက်ပါတယ်။ ပြီးလျှင် save လိုက်ပါ။

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Step 5 → Built file တခု outputထုတ်ဖို့ command တခု runပါမယ်။

1npx tailwindcss build css/build.css -o css/tailwind.css

အထက်ပါ commandကို runပြီးတဲ့နောက်မှာ tailwind classတွေပါဝင်တဲ့ tailwind.css built fileကိုရရှိမှာဖြစ်ပါတယ်။ အခု fileကိုလည်းနှစ်သက်ရာ nameပေးလို့ရပါတယ်။ style.css လို့ပေးကြတာများပါတယ်။ နောက်နည်းလမ်းတမျိုးနဲ့ built file ထုတ်နိုင်ပါသေးတယ်။

အဲ့တာကတော့ package.json fileရဲ့ script ထဲမှာ npm runပြုလုပ်သွားနိုင်မယ့် commandကိုသွားရေးထားတာပါ။

script for package.json

အပေါ်က commandကိုဘဲ script ထဲမှာ ကျွန်တော်ကတော့ build-cssလို့ နာမည်ပေးပြီး ထည့်လိုက်တာဖြစ်ပါတယ်။ ပြီးတဲ့အခါ package.json fileကို save ပြီး terminalမှာ အောက်ပါအတိုင်း runလိုက်လျှင်လည်း tailwind classတွေပါတဲ့ css built fileကိုထုတ်ပေးမှာဖြစ်ပါတယ်။

1npm run build-css

TailwindCSSကို ဆက်လက်လေ့လာရင် သိပါလိမ့်မယ်။ TailwindCSS ရဲ့ Customizationအပိုင်းကို ကိုယ်တိုင်ပြုလုပ်တဲ့အခါ တခါပြုလုပ်ပြီးတိုင်း built command ကို runရပါတယ်။အဲ့တာမှသာ updateဖြစ်တဲ့ tailwind css built fileဖြစ်နေမှာပါ။

Step 6 → html fileတခု ဖန်တီး၊ tailwind css built fileနဲ့ link ချိတ်၊ RUN ။

linked index.html

html fileကို runလိုက်တဲ့အခါ အောက်ပါအတိုင်း tailwind ရဲ့ utility class valueတွေကို inheritလုပ်ဖို့ အသင့်ဖြစ်နေတဲ့ “Hello World” resultကိုတွေ့ရမှာပါ။

Result

ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။