Работа с Tailwind в NextJS

В NextJS за стилизация може да се използва CSS фреймуъркът Tailwind, който често се използва заедно с React. Нека да разгледаме как да го използваме.

За работа със стиловете Tailwind са необходими два файла: tailwind.config.js и postcss.config.js. Тъй като при инсталирането на проекта от нас беше избран пункт "използвай стилове Tailwind", тези файлове вече са генерирани в нашия проект и се намират в неговата root директория. Ако такива файлове няма, тогава трябва да инсталирате 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>;
}