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

Класс
Свойства
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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:inline-flex to only apply the inline-flex utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.