Контейнер

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

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

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

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

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

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

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

<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',
      },
    },
  },
};