Рад са 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">
    текст текст текст
  </p>;
}