Tailwind CSS

Tailwind CSS — библиотека готовых маленьких классов: p-4 задаёт отступ, text-xl — размер шрифта, rounded-lg — скругление. Стили пишутся прямо в className, без отдельного файла CSS. В итоговую сборку попадают только классы, которые вы действительно использовали.

Где он подключён

Если при создании проекта вы ответили «Yes» на вопрос о Tailwind, всё уже настроено. Первая строка app/globals.css:

/* app/globals.css */
@import 'tailwindcss';

Создатель проекта также добавил файл postcss.config.mjs с плагином @tailwindcss/postcss. Это Tailwind CSS версии 4: отдельный tailwind.config.js ему не нужен.

Первые классы

Перепишем карточку статьи на Tailwind:

// components/PostCard.tsx
import Link from 'next/link';
 
export default function PostCard({ slug, title }: { slug: string; title: string }) {
  return (
    <article className="mb-3 rounded-lg border border-gray-200 p-4">
      <h2 className="text-xl font-semibold">
        <Link href={`/posts/${slug}`} className="text-blue-600 hover:underline">
          {title}
        </Link>
      </h2>
    </article>
  );
}

На /posts карточки выглядят так же, как с CSS-модулем, а при наведении на заголовок появится подчёркивание.

Как читать классы

Приставки hover:, focus:, md:, lg: применяют класс только в этом состоянии или на этой ширине экрана.

Свои цвета

Цвета и размеры темы задают в app/globals.css блоком @theme:

/* app/globals.css */
@import 'tailwindcss';
 
@theme {
  --color-brand: #7c3aed;
}

После этого доступны классы text-brand, bg-brand, border-brand — например, className="bg-brand text-white" для кнопки «Опубликовать».

Добавить в готовый проект

Если Tailwind не выбрали при создании проекта:

npm install tailwindcss @tailwindcss/postcss postcss

Затем создайте postcss.config.mjs с плагином @tailwindcss/postcss и добавьте @import 'tailwindcss' в начало app/globals.css.

Частая ошибка

Собирать имя класса из частей: className={`text-${color}-600`}. Tailwind ищет классы в исходном коде как целые слова и не узнает о text-red-600, поэтому стиль не появится. Пишите классы целиком, например выбирайте между 'text-red-600' и 'text-green-600' условием.