Tailwind CSS Display

Display

控制元素顯示類型的功能類

Block

使用 ?block ?創(chuàng)建一個塊級元素。

<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? 創(chuàng)建一個有自己的 block formatting context 的塊級元素。

<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? 創(chuàng)建一個內(nèi)聯(lián)塊級元素。

<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 ?創(chuàng)建一個內(nèi)聯(lián)元素。

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

Flex

使用 ?flex ?來創(chuàng)建一個塊級的 flex 容器。

<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? 來創(chuàng)建一個內(nèi)聯(lián)的 flex 容器。

<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 ?來創(chuàng)建一個 grid 容器。

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

Inline Grid

使用 ?inline-grid? 創(chuàng)建內(nèi)聯(lián) grid 容器。

<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 ?創(chuàng)建一個 “phantom” 容器，它的子代就像父代的直接子代一樣。

<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? 功能創(chuàng)建與其對應(yīng)的表元素一樣的元素。

<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 ?設(shè)置一個元素為 ?display: none?，并從頁面布局中移除。

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

響應(yīng)式

要在特定的斷點處控制元素的顯示屬性，請在任何現(xiàn)有的顯示功能類中添加 ?{screen}:? 前綴。例如，使用 ?md:inline-flex? 給中等尺寸及以上的屏幕應(yīng)用 ?inline-flex? 功能。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

變體

默認情況下， 針對 display 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?display ?屬性來控制為 display 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項目中使用 display 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?display ?屬性設(shè)置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     display: false,
    }
  }