🌈Tailwind အရောင်ထုတ်လုပ်ခြင်း

Tailwind ၏ 50～950 ကို ကိုယ်စားပြုသည့်အရာ

Tailwind CSS ၏ အရောင်များသည် 50 သည် အဖျော့ဆုံး၊ 950 သည် အရင့်ဆုံးဖြစ်သည့် အဆင့် ၁၁ ဆင့် ဂဏန်းဖြင့် တောက်ပမှုကို ပြသပြီး 500 သည် ထိုအရောင်၏ အခြေခံဖြစ်သည်။ ဂဏန်းများကို「bg-primary-500」သို့မဟုတ်「text-primary-700」ကဲ့သို့ class အမည်၏ အဆုံးတွင် ဖြည့်၍ အသုံးပြုသည်။

• 50～300 အဆင့်：50～300 အဆင့်သည် နောက်ခံအရောင် သို့မဟုတ် ဖျော့ချောသော ဖုံးလွှမ်းမှုများတွင် များစွာအသုံးပြုသော တောက်ပသောအရောင်ဖြစ်ပြီး အပေါ်တွင် အရင့်စာလုံးများ ထပ်ထားသော်လည်း ဖတ်ရလွယ်ကူသော အရောင်ဖြစ်သည်။
• 600～950 အဆင့်：600～950 အဆင့်သည် ခလုတ်ကို hover လုပ်ချိန်နှင့် ခေါင်းစီးစာလုံးအရောင်တွင် များစွာအသုံးပြုသော အရင့်အရောင်ဖြစ်ပြီး အဖြူနောက်ခံပေါ်တွင်လည်း ရှင်းလင်းစွာမြင်ရသော အရောင်ဖြစ်သည်။

v3 နှင့် v4 ၏ အရောင်သတ်မှတ်ပုံ ကွာခြားချက်

Tailwind CSS ၏ v3 တွင် အရောင်များကို tailwind.config.js ၏ JavaScript ဖြင့် သတ်မှတ်ပြီး v4 တွင် CSS ဖိုင်၏ @theme အတွင်း CSS variable အဖြစ် သတ်မှတ်သည်။ ရေးသားပုံ နှစ်မျိုးလုံးတွင် သတ်မှတ်ထားသော အရောင်ကို「bg-primary-500」ကဲ့သို့ class အမည်တူညီစွာ အသုံးပြုနိုင်သည်။

• v3 ၏ ရေးသားပုံ：v3 ၏ ရေးသားပုံသည် theme.extend.colors ထဲတွင်「primary: { 500: '#3B82F6' }」ကဲ့သို့ အရောင်အမည်နှင့် အဆင့်ကို အထဲအပြင်ခွဲ၍ ရေးသားသည့် ပုံစံဖြစ်သည်။
• v4 ၏ ရေးသားပုံ：v4 ၏ ရေးသားပုံသည် @theme ထဲတွင်「--color-primary-500: #3B82F6;」ကဲ့သို့ အရောင်အမည်နှင့် အဆင့်ကို ဟိုင်ဖင်ဖြင့် ဆက်သွယ်ထားသော variable အမည်ဖြင့် ရေးသားသည့် ပုံစံဖြစ်သည်။