ဖြေရှင်းထားသည်- tailwind css နှင့် nextjs

ကျွန်ုပ်တို့၏ ကျွမ်းကျင်သော အသိပညာကို အသုံးပြုခြင်းဖြင့် ဆောင်းပါးကို အောက်ပါအတိုင်း စတင်နိုင်သည် ။

NextJS သည် ၎င်း၏ ပြင်းထန်သော စွမ်းဆောင်ရည်နှင့် ကုန်ထုတ်စွမ်းအားကို မြှင့်တင်ပေးသည့် အင်္ဂါရပ်များကြောင့် JavaScript ဂေဟစနစ်အတွင်း ရေပန်းစားသော မူဘောင်တစ်ခုဖြစ်သည်။ Tailwind CSS နှင့်တွဲဖက်ထားသည့် အသုံးဝင်မှု-ပထမ CSS framework သည် ခေတ်မီ၊ ထိရောက်သော ဝဘ်အက်ပလီကေးရှင်းများတည်ဆောက်ရန်အတွက် ခိုင်မာပြီး လိုက်လျောညီထွေရှိသော အခြေခံအုတ်မြစ်ကို ထောက်ပံ့ပေးသည်။ ပိုကောင်းတာက Typescript နဲ့ လိုက်ဖက်ညီမှုဖြစ်ပြီး developer တွေက static typing နဲ့ runtime errors detection လိုမျိုး အကျိုးကျေးဇူးတွေကို အသုံးချနိုင်စေမှာ ဖြစ်ပါတယ်။

NextJS နှင့် Tailwind CSS မှတဆင့်developer များသည် ၎င်းတို့၏ စိတ်ကူးများကို ပိုမိုထိရောက်စွာ အသက်ဝင်စေကာ ၎င်းတို့၏ ကုန်ထုတ်စွမ်းအားကို နောက်တစ်ဆင့်သို့ တက်လှမ်းနိုင်သည်။ အတူတကွ၊ ဤအစွမ်းထက်သောကိရိယာများသည် သန့်ရှင်း၊ အလိုလိုသိမြင်နိုင်ကာ အကောင်းဆုံးသော အသုံးပြုသူအင်တာဖေ့စ်များကို ဖြစ်ပေါ်စေသည်။

ပြဿနာနိဒါန်း

မကြာခဏဆိုသလို၊ developer များသည် Typescript နှင့် Tailwind CSS ဖြင့် NextJS ကို စတင်သတ်မှတ်ရန် စိန်ခေါ်မှုကို ရင်ဆိုင်နေရသည်။ ဤလုပ်ငန်းစဉ်သည် ရှုပ်ထွေးရှုပ်ထွေးမှုများနှင့် ပုံစံအမျိုးမျိုးကို နားလည်ရန် လိုအပ်သည်။ သို့သော် အောက်ပါစာပိုဒ်များတွင် ဤပြဿနာအတွက် အဆင့်ဆင့်ဖြေရှင်းချက်ပေးသောကြောင့် စိတ်ချပါ၊ သင့်အတွက် ဤလုပ်ငန်းစဉ်ကို ဖြေလျှော့ပါ။.

// Basic imports 
import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
    /* your styles here */
`;

class MyStyledComponent extends React.Component {
  render() {
    return <StyledDiv> /* your code here */ </StyledDiv>
  }
}

export default MyStyledComponent;

ဖြေရှင်းချက်အဆင့်ဆင့်ကို ဖော်ညွှန်းခြင်း။

စနစ်ထည့်သွင်းခြင်းလုပ်ငန်းစဉ်ကို ချောမွေ့စေရန်၊ ၎င်းအား စီမံခန့်ခွဲနိုင်သော အဆင့်များအဖြစ် ပိုင်းခြားရန် လက်တွေ့ကျပါသည်။

အဆင့် 1: NextJS ပရောဂျက်အသစ်ကို စတင်ခြင်းဖြင့် စတင်ပါ။

npx create-next-app my-app
cd my-app

အဆင့် 2: Typescript ကို စနစ်ထည့်သွင်းပါ-

npm install --save typescript
touch tsconfig.json

'npm run dev' ဖြင့် သင်၏ ဖွံ့ဖြိုးတိုးတက်ရေးဆာဗာကို ဖွင့်ပါ။ ထို့နောက် NextJS သည် 'tsconfig.json' ဖိုင်ကို အလိုအလျောက်စနစ်တကျ သတ်မှတ်ပေးပါမည်။

Tailwind CSS ကို NextJS တွင်ထည့်သွင်းခြင်းအတွက်၊ ၎င်းကို ကိုယ်တိုင်ထည့်သွင်းခြင်း သို့မဟုတ် ပလပ်အင်ကို အသုံးပြုခြင်း ဖြစ်နိုင်သည့်နည်းလမ်းနှစ်ခုရှိသည်။ ရိုးရှင်းသော အကောင်အထည်ဖော်မှုအတွက်၊ ကျွန်ုပ်တို့သည် ပလပ်အင်ချဉ်းကပ်မှုကို အကြံပြုပါသည်။

Tailwind CSS ကို NextJS နှင့် ပေါင်းစပ်ခြင်း။

သင်သည် ပုံစံလုပ်ထားသော အစိတ်အပိုင်းများ စနစ်ထည့်သွင်းမှုမှ ကူးပြောင်းခြင်း သို့မဟုတ် Tailwind CSS ကို NextJS နှင့် ပေါင်းစပ်လိုပါက ဤအပိုင်းသည် သင့်အား လုပ်ငန်းစဉ်တစ်လျှောက် လမ်းညွှန်ပေးလိမ့်မည်-

npm install tailwindcss @fullhuman/postcss-purgecss postcss-preset-env
npx tailwind init tailwind.config.js --full

ထို့နောက်၊ နောက်ဆုံး payload အရွယ်အစားကို ထိထိရောက်ရောက် ပိုမိုကောင်းမွန်အောင်ပြုလုပ်ပေးသည့် Tailwind CSS နှင့် PurgeCSS ကိုအသုံးပြုရန် PostCSS ကို configure လုပ်ပါ။ နောက်ဆုံးအနေဖြင့်၊ သင်၏ကမ္ဘာလုံးဆိုင်ရာစတိုင်များတွင် Taiwind ၏ CSS ကိုထည့်သွင်းရန်မမေ့ပါနှင့်။

မရှိမဖြစ် စာကြည့်တိုက်များနှင့် လုပ်ဆောင်ချက်များ

NextJS နှင့် Tailwind CSS နှစ်ခုလုံးသည် သင်၏ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်ကို ချိန်ညှိရန်အတွက် စာကြည့်တိုက်များနှင့် လုပ်ဆောင်ချက်များစွာကို ယူဆောင်လာပါသည်။ ထင်ရှားသူတွေကတော့ 'စတိုင်လ်-jsx' နယ်ပယ်ပုံစံပုံစံနှင့် ခွင့်ပြုသော NextJS ၏စာကြည့်တိုက် '@လျှောက်ထားရန်' ရှုပ်ထွေးသောအသွင်အပြင်များကိုရေးဖွဲ့ရန် Taiwind CSS မှလုပ်ဆောင်မှု။

Tailwind CSS ကို NextJS ဖြင့် ပေါင်းစည်းထားသော ပို့စ်တွင် သင့်ဝဘ်အက်ပ်သည် အစိတ်အပိုင်း ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အသင့်ဖြစ်နေပါပြီ။ Typescript ဖြင့် ပေါင်းစပ်ထားသော ဤတွဲချိတ်မှုသည် သင်၏ အက်ပ်လီကေးရှင်းကို ထိရောက်ပြီး ထိန်းသိမ်းနိုင်စေရန် လုပ်ဆောင်နေစဉ်တွင် သင်၏ ဖွံ့ဖြိုးတိုးတက်မှု လုပ်ငန်းစဉ်ကို သိသိသာသာ မြှင့်တင်ပေးပါသည်။ မည်သို့ပင်ဆိုစေကာမူ၊ ဤကိရိယာများကို ထိထိရောက်ရောက်အသုံးချရန် အဓိကသော့ချက်မှာ ခေတ်မီ၊ SEO-ဖော်ရွေသော ဝဘ်အက်ပလီကေးရှင်းကို တီထွင်ရာတွင် ၎င်းတို့၏အသုံးချမှုကို နားလည်ရန်ဖြစ်သည်။ ထိုနေရာတွင် NextJS၊ Tailwind CSS နှင့် Typescript တို့၏ တကယ့်အလှတရားများ ထွက်ပေါ်လာသည်။

အထက်ဖော်ပြပါ စူးစမ်းရှာဖွေမှုသည် NextJS၊ Typescript နှင့် Tailwind CSS ပတ်ဝန်းကျင်ကို တည်ဆောက်ရာတွင် သင့်အား လမ်းပြပေးမည်ဖြစ်ပြီး ၎င်းသည် သင့်ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုခရီးစဉ်တွင် အဖိုးတန်သောလမ်းပြမြေပုံကို တင်ဆက်ပေးမည်ဟု မျှော်လင့်ပါသည်။