ディスプレイ

要素の表示ボックスタイプを制御するためのユーティリティ。

Class reference

Class
Properties
.blockdisplay: block;
.inline-blockdisplay: inline-block;
.inlinedisplay: inline;
.flexdisplay: flex;
.inline-flexdisplay: inline-flex;
.tabledisplay: 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;
.hiddendisplay: none;

Block

.blockを使用して、ブロックレベルの要素を作成します。

1 2 3
<div class="bg-gray-200 p-4">
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2">1</span>
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">2</span>
  <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">3</span>
</div>

Flow-Root

.flow-rootを使用して、独自のblock formatting contextを持つブロックレベルの要素を作成します。

1
2
<div class="flow-root bg-gray-400">
  <div class="my-4 block text-gray-700 text-center bg-gray-500 px-4 py-2">1</div>
</div>
<div class="flow-root bg-gray-200">
  <div class="my-4 block text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
</div>

Inline Block

.inline-blockを使用して、インラインブロックレベル要素を作成します。

1
2
3
<div class="bg-gray-200">
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Inline

.inlineを使用してインライン要素を作成します。

1
2
3
<div class="bg-gray-200">
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>

Flex

.flexを使用して、ブロックレベルのフレックスコンテナを作成します。

1
2
3
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Inline flex

.inline-flexを使用して、インラインフレックスコンテナを作成します。

1
2
3
<div class="inline-flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Grid

.gridを使用してグリッドコンテナを作成します。

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

Inline Grid

.inline-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を使用して、子が親の直接の子のように動作する「ファントム」コンテナを作成します。

1
2
3
4
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="contents">
    <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
    <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">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 bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 2</div>
      <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 4</div>
      <div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
      <div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 6</div>
    </div>
  </div>
</div>

Hidden

.hiddenを使用して要素をdisplay:noneに設定し、ページレイアウトから削除します(visibilityドキュメントの.invisibleと比較してください)。

2
3
<div class="flex bg-gray-200">
  <div class="hidden text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Responsive

特定のブレークポイントで要素の表示プロパティを制御するには、既存の表示ユーティリティクラスに{screen}:プレフィックスを追加します。 たとえば、md:inline-flexを使用して、中程度の画面サイズ以上でのみinline-flexユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="flex sm:inline-flex md:block lg:hidden xl:flex ...">
  <!-- ... -->
</div>
1
2
3

Customizing

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはdisplay utilitiesのために作られます。

あなたはどのバリアントがdisplay utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのdisplayプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

無効にする

もしdisplay utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのdisplay propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!