YMS

Let's Develop Pretty Websites Using daisyUI (Tailwind CSS Component Library)

What are CSS & CSS Frameworks?

ဒီ Article ကို CSS, Bootstrap, Tailwind CSS နဲ့ daisyUI

တို့အကြောင်းကို အသေးစိတ်သိချင်တဲ့ Developer တွေ ဖတ်သင့်ပါတယ်။ Tailwind CSS နဲ့ daisyUI ကိုဘယ်လို Install လုပ်ပြီး ဘယ်လို အသုံးပြုရမလဲဆိုတာ လည်းအသေးစိတ် ရှင်းပြထားပါတယ်။

Website Template တွေကို CSS နဲ့ Bootstrap ကိုသုံးပြီးရေးနေရတာ ပျင်းနေပြီလား?။ If yes is your answer, read & follow this article :)

Developer တွေက Website Template တွေကို CSS ကိုသုံးပြီးရေးကြတယ်၊ ဒါပေမယ့် Design Feature တစ်ခုဖြစ်လာဖို့ CSS Code တွေ တော်တော် ရေးလိုက်ရတယ်။ ဒါကြောင့် CSS အစား CSS Framework တွေသုံးလာကြတယ်။ ဥပမာ Bootstrap တို့ MaterializeCSS တို့လို CSS Framework တွေပေါ့။

CSS Framework တွေဆိုတာ CSS လို လိုချင်တဲ့ Design Feature အတွက် Code တွေ အများကြီးရေးစရာမလိုဘဲ သူတို့ သတ်မှတ်ထားတဲ့ Class Name လေးတွေကို ခေါ်သုံးလိုက်တာနဲ့ အသင့်လုပ်ထားတဲ့ Design Feature လေးတွေ ရရှိလာတဲ့အမျိုးပါ။

ဥပမာ CSS နဲ့ button လှလှလေး ဖန်တီးဖို့ ဒီလိုတွေရေးရတယ်

# HTML

# CSS

button {

padding: 5px 20px;

background-color: green;

color: white;

border: none;

border-radius: 4px;

}

အပေါ်ကပုံစံကိုပဲ ဖန်တီးဖို့ CSS Framework ဖြစ်တဲ့ Bootstrap နဲ့ကျတော့ class လေး ၂ ခုကိုခေါ်သုံးလိုက်ရုံပဲ။ ဒီလိုပါ

ကြည့်စမ်းပါအုံး ဘယ်လောက်တောင်လွယ်ကူနေပါသလဲပေါ့။ ဒါကြောင့် CSS နဲ့ From Scratch မရေးတော့ဘဲ Framework တွေသုံးလာကြတာပေါ့။ ဒါပေမယ့် Framework ကိုသုံးနေတာပဲ ဆိုပြီး CSS ကိုမသုံးတော့ဘူး၊ ဒီတိုင်းတော့လုပ်လို့မရပြန်ဘူး။ တစ်ချို့ ကပ်သီးကပ်သပ် လုပ်စရာတွေ ရှိလာခဲ့ရင် တော့ Bootstrap ရဲ့ Utility Class တွေနဲ့ လုပ်ကြသလို CSS ကိုလည်း အနည်းနဲ့ အများတော့ သုံးပေးရပါတယ်။

Framework ကိုသုံးရတဲ့ အကြောင်းအရင်းက အပေါ်မှာ ပြောခဲ့သလို Code နည်းစေဖို့ပဲ သုံးသလား ဆိုတော့လည်း မဟုတ်ပြန်ဘူး၊ ဒီထက်မက Reason တွေရှိသေးတယ်။ ကျွန်တော်တို့ Website နည်းပညာလောကမှာ ဆိုရင် အရင်ကဆို Website တွေကြည့်ဖို့ သုံးဖို့ Desktop Computer တွေ Laptop Computer တွေလောက်ပဲ သုံးကြတာပေါ့။

ဒီခေတ်မှာ တော့အဲ့ဒီလိုမဟုတ်တော့ဘူး။ Website တွေကို Device မျိုးစုံနဲ့ သုံးလာကြတယ်။ ဥပမာ Desktop Computer, Laptop Computer, Tablet တွေ Mobile Phone တွေ လိုမျိုး Device မျိုးစုံနဲ့ သုံးလာကြတယ်။ ဒီလို ဖြစ်နေတဲ့ အခြေအနေမှာ Website တစ်ခုကို ဘယ် Device နဲ့ Browse လုပ်ပါစေ သူ့ Device နဲ့ကိုက်ညီ လှပတဲ့ Design ပုံစံဖြစ်ရဖို့လိုလာတယ်။

ဒါတွေကို CSS နဲ့ရေးလို့မရဘူးမဟုတ်ဘူး ရတယ်။ ဒါပေမယ် Screen Size မျိုးစုံကို တွက်ချက်ပြီးတော့ လိုက်ရေးပေးနေရတယ်။ ဥပမာ ဒီ Computer Screen Size မှာ ပုံလေးကိုဒီလောက်ကြီးပေးပါ၊ ဒီ Mobile Screen Size မှာ ဆိုရင် ဒီပုံလေးကို ဒီလောက်ပဲထားပေးပါလို့ အများကြီးတွေ ရေးပေးရတယ်။ ဒါတောင်မှ တစ်ခါတယ်လေ ကျရင် အရမ်းကြီး Perfect မဖြစ်လာနိုင်ဘူး။

ဟော ဒီလို ပြဿနာတွေ ကို အလွယ်ကူဆုံးနဲ့ ဖြေရှင်းလို့ရအောင် Framework တွေကို သုံးလာကြတာပေါ့။

Wiki က Bootstrap CSS Framework ကိုဘာပြောလဲဆိုတော့

“Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.”

ဒါလေးက လူတိုင်းဖတ်တတ်တယ်ဆိုတာသိပါတယ်။ ဒါပေမယ့် လိုတိုရှင်းနဲ့ပြောရရင်…

Bootstrap ကို အလကားသုံးလို့ရတယ်၊ ကိုယ်ကြိုက်သလိုပြုပြင်ပြောင်းလဲပစ်လို့ရတယ်။ သူက Responsive နဲ့ Mobile-first အတွက်ီဥးစားပေးပြီး တီထွင်ထားတာဖြစ်တယ်ပေါ့။ ပြီးတော့ သူ့ကို CSS Action တွေလောက်ပဲပါလားဆိုတော့ မဟုတ်ပြန်ဘူး၊ သူ့မှာ JavaScript Action တွေပါပါတယ်။ သူ့ကို သုံးပြီးတော့ Form တွေ၊ Button တွေ၊ Navigation တွေကို Predefined Class လေးတွေကို ခေါ်သုံးတာနဲ့ ရုပ်လုံးပေါ်လာစေတယ်ပေါ့။ ဒီနေရာမှာ Materialize CSS Framework ကို အကျယ်ချဲ့ပြီး မပြောချင်တော့ပါဘူး။ သူလည်း Bootstrap နဲ့ သဘောသဘာ၀ တူတယ်လို့မှတ်ယူနိုင်ပါတယ်။

ခေါင်းစဥ်ကို “Let's Develop Pretty Websites Using daisyUI (Tailwind CSS Component Library)” လို့ ပေးထားတာမလို့ Bootstrap ကို ဘယ်လိုသုံးမလဲ ဘာညာမပြောတော့ပါဘူ။ ကျွန်တော်က စာပဲရေးနေတာ အခုထိလိုရင်းကို မရောက်သေးဘူး။ :)

ကဲဒါဆို daisyUI ကိုပြောဖို့ အချိန်တော့ရောက်လာပြီ။ daisyUI ကဘာလဲဆို တော့ Tailwind CSS ရဲ့ Component Library တစ်ခုဖြစ်ပါတယ်။ ဒါကြောင့် daisyUI ကိုမပြောမီမှာ Tailwind CSS ကဘာလဲ ဆိုတာပြောဖို့လိုလာတာပေါ့။

Tailwind CSS ကလည်း Bootstrap လိုပဲ CSS Framework တစ်ခုဖြစ်ပါတယ်။ ဒါပဲမယ့် Bootstrap နဲ့တော့ လုံး၀ မတူပြန်ပါဘူး။

Wiki က Tailwind CSS ကို ဘာပြောလဲဆိုတော့…

“Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.”

ဒီစာပိုဒ် လေးကို လိုတိုရှင်းပြောရရင် Tailwind CSS ကဆိုရင် open-source ဖြစ်တယ်ဆိုလို့ သူ့ကို အလကားသုံးလို့ရတယ်၊ ပြုပြင်ပြောင်းလဲလို့ရတယ်။ ဒါပေမယ့် သူက ဆိုရင် Bootstrap လိုမျိူး Component, Feature (buttons, cards, tables, etc…) တွေကို ဖန်တီးလို့ရတဲ့ Predefined Class တွေကိုမထောက်ပန့်ပေးဘူးတဲ့။

ဒါဆိုသူ့ကို သုံးရတာက ဘယ်လိုပုံစံလဲ ဆိုတော့ ပုံမှန် CSS ရေးရတဲ့ပုံစံနဲ့ သွားတူနေတယ်ပေါ့။

ဒါဆိုရင် CSS နဲ့ တူနေမှတော့ Tailwind CSS ကိုမသုံးပဲ CSS ကိုပဲသုံးကြမှာပေါ့ လို့ဆိုကြတဲ့ Developer တွေလည်းရှိလာတာပေါ့။ ဒါပေမယ့် CSS နဲ့ ရေးပုံတူတယ်လို့တာ ပြောတာ CSS ထက်တော့ သာအောင်လုပ်ထားကြတာပေါ့။ သူက ကိုယ်ပိုင် Reusable Components တွေကို ဖန်တီးလို့ရအောင် Utility Class တွေကို ထောက်ပံ့ တယ်။

ဥပမာ CSS နဲ့ button လှလှလေး ဖန်တီးဖို့ ဒီလိုတွေရေးရတယ်။ အပေါ်က Code တွေကိုပဲ ယူသုံးလိုက်မယ်။

# HTML

# CSS

button {

padding: 5px 20px;

background-color: green;

color: white;

border: none;

border-radius: 4px;

}

အပေါ်က button ပုံစံကိုပဲ ဖန်တီးဖို့ CSS Framework ဖြစ်တဲ့ Bootstrap နဲ့ကျတော့ class လေး ၂ ခုကိုခေါ်သုံးလိုက်ရုံပဲ။ ဒီလိုပါ

အပေါ်က button ပုံစံကိုပဲ ဖန်တီးဖို့ CSS Framework ဖြစ်တဲ့ Tailwind CSS နဲ့ကျတော့ Predefined Class လေးတွေကို ဒီလိုခေါ်သုံးရပါတယ်။ ဒီလိုပါ

Button လှလှလေးတစ်ခုရဖို့အတွက် ကျွန်တော်တို့ CSS, Bootstrap, TailwindCSS တို့နဲ့ ရေးထားတဲ့ Code တွေကို ကြည့်ရရင် Bootstrap နဲ့ရေးထားတဲ့ဟာက အလွန်ရိုးရှင်းနေတာတွေ့ရတယ်၊ တကယ်လည်းရိုးရှင်းပါတယ် ဘာလို့ဆိုတော့ သူက btn, btn-success ဆိုတဲ့ Class လေးနှစ်ခုကိုခေါ်သုံးရုံနဲ့ကို ဖြစ်လာတာပေါ့။

ကဲပြောစရာဖြစ်လာတာက Tailwind CSS နဲ့ရေးထားတဲ့ Code တွေပါ။ သူက CSS Framework လို့တာ ပြောတာကြည့်လိုက်တာနဲ့ CSS နဲ့ရေးတာထက်တောင်ရှည်နေတယ်။ ဒီလိုကြောင့်မလို့လည်း တစ်ချို့ Developer တွေက မကြိုက်ပြန်ကြဘူးပေါ့။ သူရဲ့ Main Taget က အပေါ်မှာပြောထားသလိုပဲ ကိုယ်ပိုင် Reusable Components တွေကို ဖန်တီးလို့ရတယ်၊ ပြီးတော့ Appearance, Look လို့ခေါ်တဲ့ အသွင်အပြင်က လည်း CSS နဲ့ Bootstrap ထက်လှနေတာတွေ တွေ့ရတယ်။

ဒီလိုလှတယ် ဆိုပေမယ့် Class တွေအများကြီးရေးရတာကို မကြိုက်တဲ့လူတွေက ရှိကိုရှိလာတာပေါ့။ ဒီပြဿနာကို ဖြေရှင်းဖို့ အတွက် TailwindCSS ကိုအခြေခံပြီး Tailwind Component UI Library တွေကို အများကြီးဖန်တီးလာကြတယ်။ အဲ့ဒီ Componet UI Library တွေရဲ့ အဓိက ရည်ရွယ်ချက်က ဆိုရင် TailwindCSS Design ကိုပဲ Bootstrap လိုမျိုး Predefined Component တွေကို Copy ကူးလို့ရအောင်ပါပဲ။

Developer တွေဖန်တီးထားတဲ့ TailwindCSS Based Component UI တွေကအများကြီးရှိတာပေါ့။ အဲ့ဒါတွေထဲကမှ တစ်ချို့ကို ဖော်ပြပေးလိုက်မယ်။

TailwindUI, daisyUI, Mamba UI, Headless UI, Tailwind Elements, Xtend UI, Flowbite, Tailwind UI Kit, HyperUI, Tailblocks, Kimia UI, Material Tailwind, etc… ဒီထက်မကလည်းရှိသေးပါတယ်။

ပထမနေရာမှာ ထားတဲ့ TailwindUI ကတော့ အလာကားတော့မရပါဘူး၊ ပိုက်ဆံနဲ့ ၀ယ်ရပါတယ်၊ ကျွန်တော်ဒီစာရေးနေတုန်းမှာတော့ Personal Use ကို $299 ပေးရပါတယ်။ Life Time Access နဲ့ Free Updates လည်းရပါတယ်။ ကျွန်တော်တို့ကတော့ ၀ယ်သုံးနေကြပါတယ်။

ကျွန်တော် ဖော်ပြပေးထားတဲ့ UI Library တွေအကုန်လုံးကိုတော့ အသေးစိတ်မပြောတော့ပါဘူး။ သိချင်ရင်တော့ Google ပေါ်မှာ အဲ့ဒီနာမည်တွေနဲ့ ကိုယ့်ဟာကို ရှာကြည့်လို့ရပါတယ်။ ကဲဒါဆိုရင် ဖော်ပြပေးထားတဲ့ UI Library တွေထဲကမှ ကျွန်တော် Personally သဘောကျတဲ့ daisyUI အကြောင်းကိုပြောပြချင်ပါတယ်။ နော်ကဆုံးတော့လေ ပြောပြပေးချင်တဲ့ Main Point ရောက်လာပါပြီ။

daisyUI ဆိုတာဘာလဲ၊ ဘယ်လိုတွေသုံးရသလဲပေါ့။ daisyUI ကဘာလဲဆိုတော့ TailwindCSS ကိုအခြေခံပြီးပြုလုပ်ထားတဲ့ Component UI Library တစ်ခုဖြစ်ပါတယ်။ TailwindCSS ကိုတော့ သုံးချင်တယ် ဒါပေမယ့် Class တွေကို အများကြီးမရေးချင်ဘူးဆိုတဲ့ Developer တွေအတွက်ကို ဖန်တီးပေးထားတဲ့ Library တစ်ခုဖြစ်ပါတယ်။

ပြောချင်တာက Bootstrap လိုပဲ Class နည်းနည်းနဲ့ Component တွေကိုဖန်တီးလို့ရပါတယ်။

ဥပမာ Button တစ်ခုဖန်တီးဖို့ TailwindCSS နဲ့အောက်ပါအတိုင်းရေးပေးရပါတယ်။

# Tailwind CSS

အပေါ်က Button ပုံစံရဖို့ပဲ daisyUI နဲ့ရေးရင်တော့ အောက်ပါအတိုင်းရေးရင်ရပါပြီ။ ဒီလိုပါ

# daisyUI

ကဲကြည့်စမ်း ဘယ်လောက်တောင်ရိုးရှင်းနေပါသလဲ။ Bootstrap Class တွေနဲ့လည်း တော်တော်လေးကို ဆင်ပါတယ်။ ပြောချင်တာက Bootstrap ရတဲ့ Developer ကတော့ daisyUI ကိုမျက်စိတ်မှိတ်ပြီး ရေးလို့ရတယ်ဆိုတာပါပဲ။ ဒါပေမယ့် ဒီထက်မက ကိုလိုချင်တဲ့ Design တွေကို ဖန်တီးချင်ရင်တော့ TailwindCSS ကိုလည်းသုံးလို့ရပါသေးတယ်။

ကဲ ဒီလောက်ဆိုရင်တော့ CSS, CSS Framewrok နဲ့ daisyUI အကြောင်းကို တော်တော်လေး နားလည်နေကြပြီလို့ယူဆပါတယ်။ ဒါဆိုရင် နောက်ဆုံးအနေနဲ့ daisyUI ကိုဘယ်လို သုံးမလဲ ဆိုတာကိုပြောပြလိုက်ပါမယ်။

daisyUI Component ကိုအသုံးပြုဖို့ ကျွန်တော်တို့ သုံးချင်တဲ့ Project မှာ Tailwind CSS ကိုကြိုပြီး Install လုပ်ဖို့လိုအပ်ပါတယ်။ ကဲဒါဆို Tailwind CSS ကို Project Folder မှာ Install အရင်လုပ်ပြမယ်။ Tailwind CSS ကို CDN (Content Delivery Network) နဲ့ရိုးရှင်းစွာ အသုံးပြုလို့ရပါတယ် ဒါပေမယ့် recommend မပေးပါဘူး။ Tailwind CLI Tool နဲ့ Install လုပ်ပြမယ်။ CLI နဲ့ Install လုပ်ဖို့လည်း NodeJs လိုပြန်တယ်။ NodeJs ကို https://nodejs.org ကနေ Download သွားလုပ်ပြီး Install လုပ်ပေးပါ၊ ဒါဆိုရင် npm ကိုအသုံးပြုလို့ရပါပြီ၊ NodeJs ဆိုတာလာလဲ NPM ဆိုတာဘာလဲ အသေးစိတ်မပြောတော့ပါ။

ကဲဒါဆိုရင်

# Step – 1. Create Project Folder

Project Folder တစ်ခုဆောက်ပါ၊ နာမည်ကို daisy-ui လို့ပေးလိုက်မယ်။ အဲ့ဒီ Folder ထဲမှာ index.html file တစ်ခုဖန်တီးထားပြီးတော့ VS Code နဲ့ဖွင့်လိုက်ပါ။ ဒါဆိုရင် ဒီလိုလေးရလာမယ်

daisy-ui

<> inndex.html

# Step – 2. Install Tailwind CSS

Project Folder ဖြစ်တဲ့ daisy-ui ရဲ့ Root Directory ကို VS Code Terminal (သို့) cmd မှာ အောက်ပါအတိုင်း Command Line တွေကို Run ပေးပါ။ ကျွန်တော်က တော့ Project Folder ကို Data (D:) ဆိုတဲ့ Column ထဲမှာဆောက်ထားလို့ ဒီလိုဖြစ်ပါမယ်။

# command-1

D:\daisy-ui> npm init -y

အပေါ်က Command Line ကို Run လိုက်ရင် Project Folder ထဲမှာ package.json file တစ်ခုဖန်တီးထားတာတွေ့ရပါမယ်။

daisy-ui

<> index.html

{ } package.json

# command-2

D:\daisy-ui> npm install -D tailwindcss

အပေါ်က Command Line ကို Run လိုက်ရင် Project Folder ထဲမှာ Tailwind CSS နဲ့သက်ဆိုင်တဲ့ dependence တွေပါ၀င်တဲ့ node_modules Folder ကိုတွေ့ရမယ်။ ပိုသေရှာအောင်သိချင်တယ်ဆိုရင် package.json File ကိုကြည့်လိုက်ပါ။ အဲ့ဒီမှာ

"devDependencies": {

"tailwindcss": "^3.2.4"

}

devDependencies ရဲ့အောက်မှာ Tailwind CS Version 3.2.4 ရှိနေတာကိုတွေ့ရပါမယ်။ Folder Structure ကတော့ဒီလိုလေး ဖြစ်လာမှာပါ။

daisy-ui

> node_modules

<> index.html

{ } package-lock.json

{ } package.json

# command-3

D:\daisy-ui> npx tailwindcss init

အပေါ်က Command Line ကို Run လိုက်ရင် tailwind.config.js ဆိုတဲ့ Tailwind CSS ကို Configuration လုပ်ရမယ့် File လေးတစ်ခုရလာပါမယ်။ အဲ့ဒီ File ထဲမှာ ဒီလိုလေးတွေ တွေ့ရပါမယ်။

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [],

theme: {

extend: {},

plugins: [],

}

အဲ့ဒီ File ထဲက content ဆိုတဲ့ အပိုင်းကို ဒီလို Modify လုပ်လိုက်ပါ။

content: {'./*.html'}

အဓိပ္ပါယ်က ဘာလဲဆိုတော့ Root Folder ထဲမှာရှိနေတဲ့ .html ဆိုတဲ့ File တွေကိုလိုက်ရှာပြီး watch လုပ်မယ်၊ ပြီးရင် Tailwind CSS နဲ့ Compile လုပ်မယ်ပေါ့။ Folder Structure ကတော့ဒီလိုလေး ဖြစ်လာမှာပါ။

daisy-ui

> node_modules

<> index.html

{ } package-lock.json

{ } package.json

JS tailwind.config.js

# Step -3. Add the Tailwind directives to your CSS

Project Folder ထဲမှာ input.css ဆိုပြီး File တစ်ခုကို Command Line နဲ့မဟုတ်ဘဲ Manual ပဲ Create လုပ်မယ် ပြီးရင်အောက်မှာ ဖော်ပြထားသလို Tailwind Layer တွေရဲ့ Tailwind Directive တွေကို ထည့်လိုက်ပါ။

@tailwind base;

@tailwind components;

@tailwind utilities;

ဒီအပေါ်က Directive တွေကို Tailwind က watch လုပ်မယ်၊ ပြီးရင် အဲ့ဒီ Directive တွေကို Compile လုပ်ပြီး ကျွန်တော်တို့ကို Tailwind ရဲ့ Utility Class တွေကို အသုံးပြုခွင့် ပေးမယ်ပေါ့။ အဲ့ဒီ Folder ထဲမှာပဲ Custom CSS တွေကိုလည်း ထည့်လို့ရပါသေးတယ်။ Folder Structure ကတော့ဒီလိုလေး ဖြစ်လာမှာပါ။

daisy-ui

> node_modules

<> index.html

# input.css

{ } package-lock.json

{ } package.json

JS tailwind.config.js

# Step – 4. Start the Tailwind CLI build process

Tailwind CSS Official Documentation ကတော့ အောက်က Command Line ကို Run ခိုင်းတယ်။

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

အဓိပ္ပါယ်က ဘာလဲဆိုတော့

-i ./src/input.css ။ ။ input.css မှာကျွန်တော်တို့က Tailwind Layer တွေရဲ့ Tailwind Directive တွေကို ထည့်ထားလို့ဒီ File ကို Input File အနေနဲ့ Compile လုပ်မယ်လို့ပြောတာ။

-o ./dist/output.css ။ ။ input.css File ကို Compile လုပ်လို့ရလာတဲ့ Tailwind Utility တွေကို dist ဆိုတဲ့ Folder ထဲမှာ output.css ဆိုပြီး File တစ်ခုဖန်တီးပေးပြီး ထည့်ပေးပါလို့ပြောတာပေါ့။

--watch ဆိုတာကတော့ ကျွန်တော်တို့ ယူသုံးလိုက်တဲ့ utility တွေကို အဆက်မပြတ် watch လုပ်ပေးဖို့ပြောတာပါ။

ကျွန်တော် တို့ Folder and File Structure အရတော့ အောက်ပါအတိုင်း Run ရပါမယ်။

npx tailwindcss –i ./input.css -o ./css/style.css –watch

input.css ကို Root Folder ထဲမှာဆောက်ထားလို့ src ကိုဖြုတ်လိုက်တယ်။ dist/output.css အစား css/style.css လို့ပဲ File အသစ်ဖန်တီးစေချင်လို့ ပြောင်းလိုက်တာဖြစ်ပါတယ်။

ဒါပေမယ့် Changes တစ်ခါလုပ်တိုင်း သက်ရောက်မူရှိဖို့ အဲ့ဒီ Command Line ကို Run ပေးရမယ်ဆိုတော့ အလွယ်လေးနဲ့ Run လို့ရအောင် package.json File မှာအောက်ပါအတိုင်း ပြောင်းပေးပါ။

"scripts": {

"build": "tailwindcss -i ./input.css -o ./css/style.css",

"watch": "tailwindcss -i ./input.css -o ./css/style.css --watch"

}

နောက်ဆုံးတော့ input.css ကနေ style.css သို့ Compile လုပ်ဖို့အတွက်

D:\daisy-ui> npm run build

ဒီလိုလေး Run လိုက်ရင် ရပြပြီ။ ဒီ Command ကတော့ တစ်ကြိမ် Run ပေးရင်ရပါပြီ။ ယူသုံးလိုက်တဲ့ Class တွေကို အဆက်မပြတ် watch လုပ်ပေးဖို့အတွက် အောက်က Command ကို Run ပေးလိုက်ရုံပါပဲ။

D:\daisy-ui> npm run watch

ဒီ Command ကတော့ အမြဲတမ်း Run ထားရမှာပါ။ တကယ်လို့များ Run ပြီးသား Stop ဖြစ်ရင်တောင် ပြန် Run ထားပေးရမှာပါ။ ဒီနေ့ Code ရေးတာနားတော့မယ် ဆိုပြီး VS Code ကနေ Project Folder ပိတ်လိုက်တယ်၊ နောက်တစ်ရက်ရောက်မှ အဲ့ဒီ Project ကို ပြန်ရေးတော့မယ် ဆိုရင်လည်း ဒီ Command ကို ပြန် Run ရမှာပါ။

နောက်ဆုံးမှာတော့ ကျွန်တော်တို့ Project Folder Structure ကတော့ဒီလိုလေး ဖြစ်လာမှာပါ။

daisy-ui

> css

> node_modules

<> index.html

# input.css

{ } package-lock.json

{ } package.json

JS tailwind.config.js

# Step – 5. Start using Tailwind in your HTML

ဒီ Step ကတော့ နောက်ဆုံး Step ပေါ့။ ပြောချင်တာက Tailwind CSS ကိုကျွန်တော်တို့ သုံးလို့ရနေပါပြီ။ ကိုယ်သုံးချင်တဲ့ File ကနေ css/style.css ကိုလှမ်းချိတ်ပေးပါ။ ကျွန်တော်တို့က index.html File ကနေသုံးမယ်ဆိုတော့ အဲ့ဒီ File ထဲမှာ HTML5 Structure ကိုယူပြီးတော့ head နဲ့ head ကြားမှာ အောက်ပါအတိုင်းခေါ်ပေးပါ။

ကဲနောက်ဆုံးတော့ Tailwind CSS ကိုစသုံးလို့ရပါပြီ။ ဥပမာ body tag အောက်မှာ ဒီလိုလေး စမ်းရေးကြည့်ပေါ့။

<button type="button" class="inline-flex items-center rounded border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Button text</button>

Button လှလှလေး ထွက်လာရင်တော့ Process အားလုံးမှန်နေပါတယ်။ မမှန်ရင်တော့ Step – 1 ကနေသွားပြန်ဖတ်လိုက်ပါ။

Official Webiste ကနေလည်း သွားဖတ်လို့ရပါတယ်။ https://tailwindcss.com

ကဲ Tailwind CSS ကိုလည်း Install လုပ်ထားပြီဆိုတော့ ကျွန်တော်တို့ အဓိက သုံးချင်တဲ့ daisyUI ကို Install လုပ်လို့ရပါပြီ။ daisyUI Installation Process ကတော့ မများတော့ပါဘူး။ အောက်က Command Line လေးကို Run လိုက်ပါ။

D:\daisy-ui> npm i daisyui

အပေါ်က Command ကို Run လိုက်ရင် daisyui Install လုပ်ပေးမှာပါ။ သေချာအောင် package.json မှာသွားကြည့်လိုက်ပါ အောက်ပါအတိုင်းတွေ့ရပါမယ်။

"dependencies": {

"daisyui": "^2.39.1"

နောက်ဆုံး Step အနေနဲ့ tailwind.config.js File ရဲ့ plugins မှာ အောက်ပါအတိုင်း ထည့်ပေးရင် daisyUI Component ကိုသုံးလို့

ရပါပြီ။

plugins: [require("daisyui")]

ကဲ ဒါဆိုရင် index.html မှာ daisyUI Component တွေထဲက တစ်ခုဖြစ်တဲ့ Button Class တွေကို ယူသုံးကြည့်ပါ။

<button class="btn">Button</button>

<button class="btn btn-primary">Button</button>

<button class="btn btn-secondary">Button</button>

<button class="btn btn-accent">Button</button>

<button class="btn btn-ghost">Button</button>

<button class="btn btn-link">Button</button>

အပေါ်က က daisyUI Component တွေကို ရေးထားပြီးရင် npm run watch ပြန် Run ပေးပြီး Browser မှာ Refresh လုပ်ပေးပါ၊ Button ၆ ခုက အရောင် လှလှလေးတွေနဲ့ ဖြစ်နေရင် အားလုံးအဆင်ပြေပါပြီ။ ဒီနည်းနဲ့ daisyUI ကိုအသုံးပြုလို့ရပါတယ်။ daisyUI ရဲ့ Official Website https://daisyui.com ကိုသွားပြီး Component တွေကို တစ်ခုချင်းစီ စမ်းကြည့်ပြီး Website လှလှလေးတွေ ဖန်တီးလို့ရပါပြီ။

နောက်ပိုင်းမှာ အချိန်ရလာခဲ့ရင် Tailwind CSS နဲ့ပတ်သက်တဲ့ Video Tutorial တွေ စာအုပ်တွေ ရေးပေး ဖို့ ရှိပါတယ်၊ အဲ့ဒီမှာ ထပ်တွေ့ကြမယ်လေနော်။ :)

#LoveYouAll

#YeMyintSoe_Salai

#HornbillTechnology

Search This Blog

YMS

Let's Develop Pretty Websites Using daisyUI (Tailwind CSS Component Library)

What are CSS & CSS Frameworks?

Comments

Post a Comment