Display 显示
控制元素显示框类型的实用工具。
| Class | Properties |
|---|
基本用法
Block & Inline 区块和内联
使用 inline ， inline-block 和 block 来控制文本和元素的流动。
While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property display: block will put the element on its own line and fill its parent.
<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
使用 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 弹性
使用 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 内联弹性
使用 inline-flex 创建一个内联的灵活容器，可以随文本流动。
Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here. Kramer keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity here.
<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 网格
使用 grid 来创建一个网格容器。
<div class="grid gap-4 grid-cols-3 grid-rows-3">
<!-- ... -->
</div>Inline Grid 内联网格
使用 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 内容
使用 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 ， 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 隐藏
使用 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>