展示

​基本用法

¥Basic usage

​块和内联

¥Block & Inline

使用 inline、inline-block 和 block 工具来控制文本和元素的流动。

¥Use the inline, inline-block, and block utilities to control the flow of text and elements.

<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 工具创建具有自己的 块格式化上下文 的块级元素。

¥Use the flow-root utility to create a block-level element with its own block formatting context.

<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 工具创建块级 Flex 容器。

¥Use the flex utility to create a block-level flex container.

Andrew Alfred Technical advisor

<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 工具创建一个随文本流动的内联 Flex 容器。

¥Use the inline-flex utility to create an inline flex container that flows with text.

<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 工具创建网格容器。

¥Use the grid utility to create a grid container.

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

​内联网格

¥Inline Grid

使用 inline-grid 工具创建内联网格容器。

¥Use the inline-grid utility to create an inline grid container.

<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 工具创建一个 “phantom” 容器，其子级的行为类似于父级的直接子级。

¥Use the contents utility to create a “phantom” container whose children act like direct children of the parent.

<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 工具创建行为类似于其各自表元素的元素。

¥Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities to create elements that behave like their respective table elements.

<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 并将其从页面布局中删除（与 visibility 文档中的 invisible 进行比较）。

¥Use the hidden utility to set an element to display: none and remove it from the page layout (compare with invisible from the visibility documentation).

<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.