NextJS တွင် Tailwind အသုံးပြုခြင်း

NextJS တွင် style ချယ်သမှုပြုလုပ်ရန် CSS framework ဖြစ်သော Tailwind ကို အသုံးပြုနိုင်ပါသည်၊ ၎င်းကို React နှင့် တွဲဖက်၍ မကြာခဏအသုံးပြုလေ့ရှိပါသည်။ အသုံးပြုနည်းကို ကြည့်ရှုကြပါစို့။

Tailwind styles များနှင့် အလုပ်လုပ်ရန် file နှစ်ခုလိုအပ်ပါသည်- tailwind.config.js နှင့် postcss.config.js။ ကျွန်ုပ်တို့ project ကို တပ်ဆင်စဉ်က "Tailwind styles ကိုအသုံးပြုရန်" ဆိုသည့် အချက်ကို ရွေးချယ်ထားသောကြောင့် ဤ file များကို ကျွန်ုပ်တို့၏ project ထဲတွင် ထုတ်လုပ်ပြီးဖြစ်ပြီး ၎င်း၏ အမြစ်တွင် တည်ရှိပါသည်။ အကယ်၍ ဤကဲ့သို့ file များ မရှိပါက၊ တရားဝင် စာရွက်စာတမ်းအတိုင်း Tailwind ကို တပ်ဆင်ရန် လိုအပ်ပါသည်။

ယခု Tailwind styles များကို အသုံးပြု၍ စာပိုဒ်ထဲမှ စာသားကို ထူထဲသော စာလုံးပုံစံ နှင့် အဝါရောင် စာသားအရောင် ထည့်သွင်းကြပါစို့။ Tailwind CSS တွင် ကိန်းဂဏန်းများ၊ အရောင်များအတွက် class များတွင် အသုံးပြုသော အရောင်တောက်ပမှု သို့မဟုတ် အရောင်အရိပ်ကို ကိုယ်စားပြုပါသည်။ ဤကိန်းဂဏန်းများသည် 50 မှ 900 အထိ ကွဲပြားပါသည်။ စာသားစာပိုဒ်အတွက် အလယ်အလတ် အရောင်အရိပ်ကို ရွေးချယ်ပါမည်-

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    စာသား စာသား စာသား
  </p>;
}