🐽

Tailwindのz-indexマジックナンバー解決方針

2025/09/05に公開

結論

z-indexの変数はtailwind.config.jsではなく.cssで定義しよう
異論は認めます

よくありそうなパターン

CSSを使わず、tailwind.config.jsで定義

theme: {  
  extend: {  
    zIndex: {  
      modal: 50,
    },  
  },  
},

const SampleComponent () => {
    return {
    <box className='z-modal'>
    )
}
export default SampleComponent

特徴
tailwindの変数をtailwindの中で定義できるため、実装も確認もしやすい

問題点
tailwindの変数を使った定義ができないコンポーネントで躓く

react-select
classNameで定義できない...

モーダル画面上でreact-selectを使用する場合、z-indexはモーダルと同じ値にしたい

その結果
react-selectのためだけに新たに変数を定義する羽目に😭

styles={{
    menuPortal: (base) => ({
        ...base,
        zIndex: REACT_SELECT_Z_INDEX,
    }),
}}

CSSを使う場合

cssで変数とreact-selectのスタイルを定義

:root {
  --layer-modal: 50;
}

/* react-selectのスタイル */
.react-select__menu-portal {
  z-index: var(--layer-modal);
}

cssで定義した変数を呼び出す

theme: {  
  extend: {  
    zIndex: {  
      modal: 'var(--layer-modal)',
    },  
  },  
},

実際にコンポーネントに適応

const SampleComponent () => {
    return {
    // tailwind.config.jsあり
    <box className='z-modal' /> 
    
    // tailwind.config.js無し
    <Select
                  isClearable
                  defaultValue={defaultOption}
                  className='basic-multi-select'
                  
                  // cssのスタイルを適応
                  classNamePrefix='react-select'
                  // 以下省略
                />
    )
}
export default SampleComponent

まとめ

React-selectのようなTailwindのclassNameを反映できないライブラリを使う可能性を考慮して、cssで定義しよう(提案)

結論

よくありそうなパターン

CSSを使う場合

まとめ

Discussion