Отображение

Быстрый справочник

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

Блок и Строка

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

<div>
  When controlling the flow of text, using the CSS property
  <span class="inline">display: inline</span>
  will cause the text inside the element to wrap normally.

  While using the property <span class="inline-block">display: inline-block</span>
  will wrap the element to prevent the text inside from extending beyond its parent.

  Lastly, using the property <span class="block">display: block</span>
  will put the element on its own line and fill its parent.
</div>

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

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

<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>

Гибкая компоновка

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

<div class="flex items-center">
  <img src="path/to/image.jpg">
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

Строчный контейнер гибкой компоновки

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

<p>
  Today I spent most of the day researching ways to ...
  <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>Kramer</span>
  </span>
  keeps telling me there is no way to make it work, that ...
</p>

Сетка

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

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

Строчная сетка

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

<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 для создания контейнера «фантом», чьи дочерние элементы ведут себя как непосредственные дочерние элементы родителя.

<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 утилиты для создания элементов, которые ведут себя как соответствующие элементы таблицы.

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</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 из документации по видимости).

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

Условное применение

Наведение, фокус и другие состояния

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

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

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

Точки разрыва и медиа-запросы

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

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

Дополнительную информацию можно найти в документации по адаптивному дизайну, тёмной теме и другим модификаторам медиа-запросов.