Контейнер

​

Основы использования

​

Использование контейнера

Класс контейнера container устанавливает максимальную ширину max-width элемента, соответствующую минимальной ширине min-width текущей контрольной точки. Это полезно, если вы предпочитаете проектировать для фиксированного набора размеров экрана вместо того, чтобы пытаться приспособить полностью подвижное окно просмотра.

Обратите внимание, что в отличие от контейнеров, которые вы могли использовать в других фреймворках, контейнер Tailwind не центрируется автоматически и не имеет встроенных горизонтальных отступов.

Чтобы центрировать контейнер, используйте утилиту mx-auto:

<div class="container mx-auto">
  <!-- ... -->
</div>

Чтобы добавить горизонтальный отступ, используйте утилиты px-{size}:

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

Если вы хотите центрировать контейнеры по умолчанию или включить горизонтальное заполнение по умолчанию, смотрите параметры настройки ниже.

​

Применяя условно

​

Адаптивные варианты

Класс container также по умолчанию включает в себя адаптивные варианты, такие как md:container, которые позволяют заставить что-то вести себя как контейнер только при определенной контрольной точке и выше:

<!-- Жидкость на всю ширину до контрольной точки `md`, затем зафиксируйте контейнер -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

​

Кастомизация

​

Центрирование по умолчанию

Чтобы центрировать контейнеры по умолчанию, установите для параметра center значение true в разделе theme.container Вашего файла конфигурации:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

​

Добавление горизонтального отступа

Чтобы добавить горизонтальные отступы по умолчанию, укажите количество отступов, которое вы хотите, используя опцию padding в разделе theme.container Вашего файла конфигурации:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

Если вы хотите указать разную величину заполнения для каждой контрольной точки, используйте объект для предоставления значения по умолчанию default и любых переопределений, зависящих от контрольной точки:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};