Контейнер

Использование

Класс контейнера 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 Вашего файла конфигурации:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

Горизонтальный отступ

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

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

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

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Отключение адаптивных вариантов

Если вы хотите отключить отзывчивые варианты, вы можете сделать это, установив для контейнера container пустой массив в разделе вариантов variants файла tailwind.config.js:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     container: [],
    }
  }

Полное отключение

Если вы не планируете использовать класс container в своем проекте, вы можете полностью отключить его, установив для свойства container значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     container: false,
    }
  }