Макет
Утилиты для управления типом отображения элемента.
Используйте inline
, inline-block
и 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
для создания контейнера сетки.
<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 ...">Артист</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).
<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.