Tailwind-ті NextJS-те қолдану

NextJS-те стильдеу үшін React-пен жиі қолданылатын CSS фреймворгі Tailwind-ті пайдалануға болады. Оны қалай пайдалану керектігін қарастырайық.

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">
    мәтін мәтін мәтін
  </p>;
}