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>;
}