Tailwind NextJS හි වැඩ කිරීම

NextJS හි ශෛලීකරණය සඳහා ඔබට CSS රාමුව වන Tailwind භාවිතා කළ හැකිය, එය බොහෝ විට React සමඟ භාවිතා වේ. එය භාවිතා කරන ආකාරය බලමු.

Tailwind ශෛලීකරණය සඳහා ක්‍රියා කිරීමට ගොනු දෙකක් අවශ්‍ය වේ: tailwind.config.js සහ postcss.config.js. ව්‍යාපෘතිය සවි කරන විට අපි තෝරාගත් "Tailwind ශෛලීකරණය භාවිතා කරන්න" යන කරුණ හේතුවෙන්, මෙම ගොනු දැනටමත් ජනනය කර ඇති අතර අපගේ ව්‍යාපෘතියේ මුල් අංගයේ පිහිටා ඇත. එවැනි ගොනු නොමැති නම්, ඔබ Tailwind සවි කළ යුතුය නිල ලේඛනය අනුව.

දැන් අපි අක්ෂර ඝනකම සහ කහ පැහැති වර්ණය Tailwind ශෛලීකරණය භාවිතයෙන් ඡේදයකට එකතු කරමු. Tailwind CSS හි අංක, වර්ණ සඳහා පන්තිවල භාවිතා කරනු ලබන්නේ වර්ණයේ තීව්‍රතාවය හෝ සෙවනැල්ල නිරූපණය කිරීමට ය. මෙම අංක 50 සිට 900 දක්වා වෙනස් වේ. පෙළ සඳහා අපි මධ්‍යස්ථ සෙවනැල්ල තෝරා ගනිමු:

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