Tailwind CSS home page
Tailwind CSS on GitHub

Display

控制元素显示类型的功能类

Default class reference

Class
Properties
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;

Block

使用 block 创建一个块级元素。

1 2 3 
<div class="space-y-4 ...">
  <span class="block ...">1</span>
  <span class="block ...">2</span>
  <span class="block ...">3</span>
</div>

Flow-Root

使用 flow-root 创建一个有自己的 block formatting context 的块级元素。

1
2
<div class="space-y-4">
  <div class="flow-root ...">
    <div class="my-4 ...">1</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">2</div>
  </div>
</div>

Inline Block

使用 inline-block 创建一个内联块级元素。

1
2
3
<div class="space-x-4 ...">
  <div class="inline-block ...">1</div>
  <div class="inline-block ...">2</div>
  <div class="inline-block ...">3</div>
</div>

Inline

使用 inline 创建一个内联元素。

1
2
3
<div>
  <div class="inline ...">1</div>
  <div class="inline ...">2</div>
  <div class="inline ...">3</div>
</div>

Flex

使用 flex 来创建一个块级的 flex 容器。

1
2
3
<div class="flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Inline flex

使用 inline-flex 来创建一个内联的 flex 容器。

1
2
3
<div class="inline-flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>

Grid

使用 grid 来创建一个 grid 容器。

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

Inline Grid

使用 inline-grid 创建内联 grid 容器。

1 1 1 2 2 2 
<span class="inline-grid grid-cols-3 gap-x-4">
  <span>1</span>
  <span>1</span>
  <span>1</span>
</span>
<span class="inline-grid grid-cols-3 gap-x-4">
  <span>2</span>
  <span>2</span>
  <span>2</span>
</span>

Contents

使用 contents 创建一个 "phantom" 容器，它的子代就像父代的直接子代一样。

1
2
3
4
<div class="flex ...">
  <div class="flex-1 ...">1</div>
  <div class="contents">
    <div class="flex-1 ...">2</div>
    <div class="flex-1 ...">3</div>
  </div>
  <div class="flex-1 ...">4</div>
</div>

Table

使用 table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group, 和 .table-footer-group 功能创建与其对应的表元素一样的元素。

A cell with more content
Cell 2
Cell 3
Cell 4
A cell with more content
Cell 6
<div class="table w-full ...">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">A cell with more content</div>
      <div class="table-cell ...">Cell 2</div>
      <div class="table-cell ...">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Cell 4</div>
      <div class="table-cell ...">A cell with more content</div>
      <div class="table-cell ...">Cell 6</div>
    </div>
  </div>
</div>

Hidden

使用 hidden 设置一个元素为 display: none，并从页面布局中移除(对比 visibility 文档的 .invisible)。

2
3
<div class="flex ...">
  <div class="hidden ...">1</div>
  <div>2</div>
  <div>3</div>
</div>

响应式

要在特定的断点处控制元素的显示属性，请在任何现有的显示功能类中添加 {screen}: 前缀。例如，使用 md:inline-flex 给中等尺寸及以上的屏幕应用 inline-flex 功能。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

定制

Variants

默认情况下， 针对 display 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 display 属性来控制为 display 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       display: ['hover', 'focus'],
      }
    }
  }

Disabling

如果您不打算在您的项目中使用 display 功能，您可以通过在配置文件的 corePlugins 部分将 display property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     display: false,
    }
  }
Box Sizing浮动