Работа со Tailwind во NextJS

Во NextJS за стилизација може да се користи CSS фрејмворкот Tailwind, кој често се користи заедно со React. Ајде да погледнеме како се користи.

За работа со стиловите Tailwind се потребни две датотеки: tailwind.config.js и postcss.config.js. Бидејќи при инсталацијата на проектот од нас беше избрана опцијата "користи стилови Tailwind", овие датотеки се веќе генерирани во нашиот проект и се наоѓаат во неговиот корен. Доколку нема такви датотеки, тогаш треба да го инсталирате Tailwind согласно официјалната документација.

Ајде да додадеме полузадебелен стил и жолта боја на текстот од параграфот со помош на стиловите Tailwind. Во Tailwind CSS бројките, кои се користат во класите за бои означуваат интензитет или нијанса на бојата. Овие бројки варираат од 50 до 900. За текстот на параграфот да избереме средна нијанса:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Обидете се да користите Tailwind стилови во вашиот проект.