Tailwind CSS: оформление через классы

Для Next.js 16.3.8 (App Router) и React 19.3.0, Tailwind CSS 4.3.3, CLI shadcn 4.21.1. Обновлено 14 октября 2026.

Мы уже знаем CSS: свойства, селекторы и медиазапросы. Tailwind CSS предоставляет короткие классы для этих свойств. p-4 задает отступ, flex включает Flexbox, rounded-xl скругляет углы. Браузер по-прежнему получает обычный CSS.

Что уже подготовил create-next-app

Если при создании проекта выбрана опция Tailwind, подключение уже есть. Проверьте app/globals.css: там должен быть @import "tailwindcss";. Файл подключен из корневого app/layout.tsx, а postcss.config.mjs использует @tailwindcss/postcss.

Не переносите в этот проект инструкцию для Tailwind 3 с @tailwind base и обязательным tailwind.config.js. В Tailwind 4 основной способ настройки – CSS. Если интеграции нет, используйте официальное руководство для Next.js.

Одна карточка, два способа записи

Сначала знакомый CSS:

.event-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #d4d4d4;
  border-radius: 16px;
  padding: 24px;
}

Та же карточка с классами Tailwind:

type EventCardProps = {
  name: string;
  price: number;
};
 
export function EventCard({ name, price }: EventCardProps) {
  return (
    <article className="flex flex-col gap-3 rounded-2xl border border-neutral-300 p-6">
      <h2 className="text-xl font-semibold">{name}</h2>
      <p>{price === 0 ? "Бесплатно" : `${price} ₽`}</p>
    </article>
  );
}

Сохраните этот компонент вместо прежнего app/event-card.tsx. Его параметры остались прежними, поэтому страницу с карточками переписывать не нужно.

p-6 соответствует calc(var(--spacing) * 6). При стандартном --spacing: 0.25rem это 1.5rem, обычно 24 CSS-пикселя при размере корневого шрифта 16px. Число в имени класса обозначает шаг шкалы, а не количество пикселей.

Адаптивность: сначала узкий экран

<ul className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  {visible.map((item) => (
    <li key={item.id}>
      <EventCard name={item.name} price={item.price} />
      <Link href={`/events/${item.id}`}>Подробнее</Link>
    </li>
  ))}
</ul>

Это контейнер карточек в EventFilter из статьи о серверных и клиентских компонентах. Здесь уже подключены EventCard и Link, а visible содержит результат фильтрации. Сохраняйте кнопку фильтра и проверку пустого результата вокруг списка.

По умолчанию колонка одна. md: включает две колонки начиная со стандартной границы 48rem, xl: – три начиная с 80rem. Убедитесь, что карточке хватает места и при промежуточной ширине окна: названия мероприятий бывают длиннее «Лекция».

Префиксы называются вариантами. Они добавляют условие к применению класса. Наведение не заменяет фокус: пользователь может перемещаться по странице клавишей Tab.

Когда значение неизвестно заранее

При сборке Tailwind ищет полные имена классов в исходниках. Он не исполняет ваш JavaScript:

// Не работает надежно: нужного класса может не оказаться в CSS.
const className = `bg-${color}-600`;

Для нескольких известных вариантов задайте полные строки:

const variants = {
  free: "border-emerald-600 text-emerald-700",
  paid: "border-indigo-600 text-indigo-700",
};
 
const className = variants[price === 0 ? "free" : "paid"];

Это учебные цвета для светлого фона. В следующей статье заменим их смысловыми токенами с отдельными значениями для обеих тем.

Если значение приходит от пользователя, например цвет из палитры, используйте style={{ backgroundColor: color }}. Если нужен один нестандартный размер, можно написать класс max-w-[42rem]. Не превращайте весь интерфейс в сотни случайных значений: согласованная шкала упрощает оформление.

Tailwind не заменяет знание CSS

При неправильном flex-shrink или overflow проблема останется и при использовании класса Tailwind. Откройте DevTools и посмотрите вычисленные свойства элемента. Обычный CSS остается удобным для сложных селекторов, анимаций и собственных повторяемых правил.

Попробуйте: оформите афишу и проверьте узкий экран, длинный заголовок, клавиатурный фокус и пустой список. Следующий шаг – цветовые роли и темы.

Документация: классы и варианты, адаптивность, поиск классов в исходниках.