Tailwind менен NextJS'те иштөө

NextJS'те стилдөө үчүн React менен көп колдонулган CSS фреймворгу Tailwind'ти колдонсо болот. Аны кантип колдонорубузга каралы.

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

Өзүңүздүн долбооруңузда Tailwind стилдерин колдонууга аракет кылыңыз.