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

Класс
Свойства
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 для создания элемента блочного уровня с его собственным контекстом форматирования блока.

Что ж, позволь мне сказать тебе кое-что, смешной мальчик. Знаешь эту маленькую марку, на которой написано "Публичная библиотека Нью-Йорка"? Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
<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 для создания гибкого контейнера на уровне блока.

Andrew Alfred Technical advisor
<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>

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