Краткая справка

Класс
Свойства
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

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

Блочные и Строчные

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

При управлении потоком текста с помощью свойства CSS display: inline вызовет текст внутри элемента для нормального обертывания.

При использовании свойства display: inline-block обернет элемент, чтобы предотвратить текст внутри не выходит за пределы своего родителя.

Наконец, использование свойства display: block поместит элемент в отдельную строку и заполнит его родителя.
<div>
  При управлении потоком текста с помощью свойства CSS
  <span class="inline">display: inline</span>
  вызовет текст внутри элемента для нормального обертывания.

  При использовании свойства <span class="inline-block">display: inline-block</span>
  обернет элемент, чтобы предотвратить текст внутри не выходит за пределы своего родителя.

  Наконец, использование свойства <span class="block">display: block</span>
  поместит элемент в отдельную строку и заполнит его родительский элемент.
</div>

Корень потока

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

Что ж, позволь мне кое-что сказать, веселый мальчик. Вы знаете эту маленькую марку, на которой написано «Публичная библиотека Нью-Йорка»? Что ж, это может ничего не значить для вас, но для меня это много значит. Чертовски много.
Конечно, смейтесь, если хотите. Я видел ваш типаж раньше: яркий, создающий сцену, щеголяющий условностями. Да, я знаю, о чем ты думаешь. Что этот парень так сильно портит старые библиотечные книги? Что ж, позвольте мне дать вам подсказку, младший.
<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Что ж, позволь мне кое-что тебе сказать, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Конечно, давай, смейся, если хочешь...</div>
  </div>
</div>

Флекс

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

Эндрю Альфред Технический консультант
<div class="flex items-center">
  <img src="path/to/image.jpg">
  <div>
    <strong>Эндрю Альфред</strong>
    <span>Технический консультант</span>
  </div>
</div>

Инлайновый флекс

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

Сегодня я провел большую часть дня, изучая способы воспользоваться тем фактом, что в Мичигане бутылки можно вернуть за 10 центов, а здесь — только за 5 центов. Крамер продолжает говорить мне, что нет никакого способа заставить это работать, что он просчитал все возможные подходы, но я просто должен верить, что есть способ заставить это работать, здесь просто слишком много возможностей.

<p>
  Сегодня я провел большую часть дня, изучая способы ...
  <span class="inline-flex items-baseline">
    <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
    <span>Крамер</span>
  </span>
  продолжает говорить мне, что нет никакого способа заставить это работать, что ...
</p>

Гриды

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

01
02
03
04
05
06
07
08
09
<div class="grid gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>

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

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

01
02
03
04
05
06
01
02
03
04
05
06
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

Содержимое

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

01
02
03
04
<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>

Таблица

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

Песня
Артист
Год
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Артист</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Год</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

Скрытый

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

02
03
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

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

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:inline-flex, чтобы применять утилиту inline-flex только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

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

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.