Работа с Tailwind в NextJS

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

Для работы со стилями Tailwind должен быть подключен в проекте. Поскольку при установке проекта нами был выбран пункт "использовать стили Tailwind", подключение уже выполнено: в файле globals.css в папке app есть строка @import "tailwindcss". Если при создании проекта Tailwind не выбирали, подключим его по официальной документации.

Давайте добавим полужирное начертание и желтый цвет тексту из абзаца с помощью стилей Tailwind. В Tailwind CSS числа, используемые в классах для цветов обозначают интенсивность или оттенок цвета. Эти числа варьируются от 50 до 900. Для текста абзаца выберем средний оттенок:

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

Попробуйте использовать Tailwind стили в вашем проекте.