Zインデックス

要素のスタック順序を制御するためのユーティリティ。

Class reference

Class
Properties
.z-0z-index: 0;
.z-10z-index: 10;
.z-20z-index: 20;
.z-30z-index: 30;
.z-40z-index: 40;
.z-50z-index: 50;
.z-autoz-index: auto;

使用方法

.z-{index}ユーティリティを使用して、表示されている順序に関係なく、Tailwindの要素のスタック順序(または3次元配置)を制御します。

z-40
z-30
z-20
z-10
z-0
<div class="z-40 ml-0 mt-0 bg-gray-400">z-40</div>
<div class="z-30 ml-2 mt-2 bg-gray-500">z-30</div>
<div class="z-20 ml-4 mt-4 bg-gray-600">z-20</div>
<div class="z-10 ml-6 mt-6 bg-gray-700">z-10</div>
<div class="z-0 ml-8 mt-8 bg-gray-800">z-0</div>

Responsive

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

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

<div class="z-0 sm:z-10 md:z-20 lg:z-30 xl:z-40 bg-yellow-400">yellow</div>
<div class="z-40 ml-4 mt-0 bg-gray-400">z-40</div>
<div class="z-30 ml-6 mt-2 bg-gray-500">z-30</div>
<div class="z-20 ml-8 mt-4 bg-gray-600">z-20</div>
<div class="z-10 ml-10 mt-6 bg-gray-700">z-10</div>
<div class="z-0 ml-12 mt-8 bg-gray-800">z-0</div>
yellow
z-40
z-30
z-20
z-10
z-0

Customizing

Z-Index scale

デフォルトでは、Tailwindは6つの数値のz-indexユーティリティとautoユーティリティを提供します。 Tailwind構成のtheme.zIndexセクションを編集して、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      zIndex: {
        '0': 0,
-       '10': 10,
-       '20': 20,
-       '30': 30,
-       '40': 40,
-       '50': 50,
+       '25': 25,
+       '50': 50,
+       '75': 75,
+       '100': 100,
        'auto': 'auto',
      }
    }
  }

Negative values

Tailwindの負のマージンクラスと同じ形式の負のz-indexクラスを追加する場合は、構成ファイルのキーの前にダッシュを付けます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        zIndex: {
+         '-10': '-10',
        }
      }
    }
  }

Tailwindは、予想されるような z--10ではなく、先頭のダッシュが表示されたときに-z-10のようなクラスを生成するのに十分スマートです。

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!