Отображение

Справочник классов по умолчанию

Класс	Свойства
block	display: block;
inline-block	display: inline-block;
inline	display: inline;
flex	display: flex;
inline-flex	display: inline-flex;
table	display: table;
inline-table	display: inline-table;
table-caption	display: table-caption;
table-cell	display: table-cell;
table-column	display: table-column;
table-column-group	display: table-column-group;
table-footer-group	display: table-footer-group;
table-header-group	display: table-header-group;
table-row-group	display: table-row-group;
table-row	display: table-row;
flow-root	display: flow-root;
grid	display: grid;
inline-grid	display: inline-grid;
contents	display: contents;
list-item	display: list-item;
hidden	display: none;

Блочный

Используйте block, чтобы создать блочный элемент.

1 2 3

<div class="space-y-4 ...">
  <span class="block ...">1</span>
  <span class="block ...">2</span>
  <span class="block ...">3</span>
</div>

Поток-Корень

Используйте flow-root для создания элемента блочного уровня с его собственным контекстом форматирования блока.

<div class="space-y-4">
  <div class="flow-root ...">
    <div class="my-4 ...">1</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">2</div>
  </div>
</div>

Строчно-Блочный

Используйте inline-block для создания встроенного элемента блочного уровня.

<div class="space-x-4 ...">
  <div class="inline-block ...">1</div>
  <div class="inline-block ...">2</div>
  <div class="inline-block ...">3</div>
</div>

Строчный

Используйте inline для создания встроенного элемента.

<div>
  <div class="inline ...">1</div>
  <div class="inline ...">2</div>
  <div class="inline ...">3</div>
</div>

Флекс

Используйте flex для создания гибкого контейнера на уровне блока.

<div class="flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Инлайновый-Флекс

Используйте inline-flex для создания встроенного гибкого контейнера.

<div class="inline-flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Гриды

Используйте grid для создания контейнера сетки.

<div class="grid gap-4 grid-cols-3">
  <!-- ... -->
</div>

Инлайновые Гриды

Используйте inline-grid для создания контейнера встроенной сетки.

1 1 1 2 2 2

<span class="inline-grid grid-cols-3 gap-x-4">
  <span>1</span>
  <span>1</span>
  <span>1</span>
</span>
<span class="inline-grid grid-cols-3 gap-x-4">
  <span>2</span>
  <span>2</span>
  <span>2</span>
</span>

Контенты

Используйте contents, чтобы создать “фантомный” контейнер, дочерние элементы которого действуют как прямые дочерние элементы родителя.

<div class="flex ...">
  <div class="flex-1 ...">1</div>
  <div class="contents">
    <div class="flex-1 ...">2</div>
    <div class="flex-1 ...">3</div>
  </div>
  <div class="flex-1 ...">4</div>
</div>

Таблица

Используйте таблицы table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group и .table-footer-group для создания элементов, которые ведут себя как соответствующие им элементы таблицы.

Ячейка с большим количеством содержимого

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка с большим количеством содержимого

Ячейка 6

<div class="table w-full ...">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">Ячейка с большим количеством содержимого</div>
      <div class="table-cell ...">Ячейка 2</div>
      <div class="table-cell ...">Ячейка 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Ячейка 4</div>
      <div class="table-cell ...">Ячейка с большим количеством содержимого</div>
      <div class="table-cell ...">Ячейка 6</div>
    </div>
  </div>
</div>

Скрытый

Используйте hidden, чтобы установить элемент на display: none и удалить его из макета страницы (сравните с .invisible из документации visibility).

<div class="flex ...">
  <div class="hidden ...">1</div>
  <div>2</div>
  <div>3</div>
</div>

Адаптивность

Чтобы управлять свойством отображения элемента в определенной контрольной точке, добавьте префикс {screen}: к любому существующему служебному классу отображения. Например, используйте md:inline-flex, чтобы применить утилиту inline-flex только при средних размерах экрана и выше.

<div class="flex md:inline-flex ...">
  <!-- ... -->
</div>

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

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

Варианты

По умолчанию, только responsive варианты создаются для утилит display.

Вы можете контролировать, какие варианты создаются для утилит display для изменения свойства display в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       display: ['hover', 'focus'],
      }
    }
  }

Отключение

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

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