Настройка container в Tailwind CSS 4

При переходе на Tailwind CSS 4 вы столкнулись с важным изменением: команда создания конфигурационного файла больше не поддерживается. Вместо этого настройки задаются напрямую через CSS. Особенно это заметно при работе с классом container, который по умолчанию имеет фиксированные брейкпоинты (640px, 768px, 1024px, 1280px). Если ваши макеты требуют других значений, необходимо переопределить эти стили. В этой статье мы подробно разберём, как это сделать.

Почему в Tailwind 4 нет конфигурационного файла?

Разработчики Tailwind CSS упростили архитектуру: теперь все настройки пишутся в обычном CSS-файле с использованием директивы @theme. Это ускоряет сборку и делает код более прозрачным. Вы больше не зависите от tailwind.config.js - всё управление стилями происходит в одном месте.

Как переопределить container в Tailwind 4

Чтобы задать собственные стили для класса .container, выполните два шага:

1. Отключите стандартные стили container

Добавьте в ваш CSS-файл (например, app.css) следующее правило:

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  /* Отключаем унаследованные max-width */
  max-width: none;
}

Ключевой момент - max-width: none удаляет все дефолтные брейкпоинты.

2. Добавьте свои брейкпоинты через медиа-запросы

Теперь вы можете задать собственные значения:

@media (width >= 768px) {
  .container { max-width: 750px; }
}
@media (width >= 1024px) {
  .container { max-width: 970px; }
}
@media (width >= 1280px) {
  .container { max-width: 1170px; }
}

Обратите внимание: в Tailwind 4 используется синтаксис @media (width >= ...) вместо @media (min-width: ...).

Использование @theme для глобальных настроек

Если вы хотите, чтобы кастомные брейкпоинты применялись ко всем элементам (а не только к .container), используйте директиву @theme:

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

После этого классы container автоматически подхватят новые значения. Однако не забудьте переопределить сам .container, если его стили не совпадают с вашими.

Альтернативный подход: кастомный класс

Если вы не хотите менять поведение стандартного .container, создайте свой класс, например .my-container:

.my-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (width >= 768px) {
  .my-container { max-width: 720px; }
}
@media (width >= 1024px) {
  .my-container { max-width: 960px; }
}

Так вы сохраните оригинальный .container для других целей.

Распространённые ошибки

• Забыли отключить дефолтные стили: Если не указать max-width: none, ваши медиа-запросы не сработают, так как стандартные правила имеют тот же вес.
• Неправильный синтаксис медиа-запроса: В Tailwind 4 используйте width >=, а не min-width.
• Конфликт с другими CSS-файлами: Убедитесь, что ваш CSS подключается после основных стилей Tailwind.