Tailwind CSS z-indexユーティリティとカスタムスケール

Tailwind CSS z-indexシステム

Tailwind CSSはデフォルトで最小限のz-indexユーティリティセットを提供し、シンプルなレイヤリングニーズ向けに設計されています。複雑なアプリケーションでは、スケールの拡張が必要になるでしょう。

デフォルトのTailwind z-indexユーティリティ

/* デフォルトTailwind z-indexスケール */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-auto { z-index: auto; }

スケールの拡張

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      zIndex: {
        '60': '60',
        '70': '70',
        'dropdown': '1000',
        'sticky': '1020',
        'overlay': '1040',
        'modal': '1050',
        'popover': '1060',
        'toast': '1080',
        'tooltip': '1090',
      }
    }
  }
}

これによりz-dropdown、z-modal、z-tooltipなどのユーティリティが生成されます。

任意の値の使用

Tailwindは任意のz-index値もサポートしています：

<div class="z-[1050]">モーダルコンテンツ</div>

便利ですが、任意の値は一貫したスケールの目的を損ないます。名前付きユーティリティを使用することを推奨します。

Tailwindでの負のz-index

<div class="-z-10">ベースレイヤーの背後</div>

ベストプラクティス

まずこのようなツールを使ってz-indexスケールを設計し、それに合わせてTailwindのzIndexテーマを設定します。