Работа с 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 стили в вашем проекте.