Работа с 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">
    text text text
  </p>;
}