Zenn
😖

TailwindCSSのhoverが反映されない！？で確認すること。（TailwindCSS入門）

2024/04/24に公開
Next.js
Tailwind CSS
入門
z-index
hover
tech

はじめに

Next.js + TailwindCSSを使用していて、TailwindCSSのhoverが何故か動かない（反映されない）といった事に遭遇したのでその原因と対策についてまとめたいと思います。

原因

別の要素の領域が被ってhoverが動かない（反映されない）ように見えていた。

問題コードの例

src/app/page.tsx
export default function Home() {
  return (
  <body>
  <button className="fixed bg-blue-300 hover:bg-stone-300">abc</button>
  <div className="absolute top-0 w-full">
      <div className="ml-10 text-xl">
          <h1>Hello World !!</h1>
      </div>
  </div>
  </body>
  )};

動作


このコードでは、bg-blue-300は反映されていますが、hover:bg-stone-300は反映されません。
極端ですが、試しにHelloworldのdivを全て消してみます。

src/app/page.tsx
export default function Home() {
  return (
  <body>
      <button className="fixed bg-blue-300 hover:bg-stone-300">abc</button>
  </body>
  )};


hover:bg-stone-300が反映されました。
つまり、hoverに影響を与えているのは例コードのdivとなります。

  <div className="absolute top-10 w-full">
      <div className="ml-10 text-xl">
          <h1>Hello World !!</h1>
      </div>
  </div>

対策

z-index（TailwindCSSでは"z-○○"）を設定して、要素の優先順を上げる
要素が被らないようなスタイリングを意識する

例コード

src/app/page.tsx
export default function Home() {
  return (
  <body>
  <button className=" fixed bg-blue-300 hover:bg-stone-300 z-10">abc</button>
  <div className="absolute top-0 w-full">
      <div className="ml-10 text-xl">
          <h1>Hello World !!</h1>
      </div>
  </div>
  </body>
  )};


例えば、top-10に設定したり、right-1に設定したりすることで回避することもできます。

注意すべき場面

  • headerやnavを画面上部に固定したいとき
  • 要素が重なり合うようなスタイル設定のとき

まとめ

動かない（反映されない）ようにみえた際は他の要素が被っている可能性がある。
z-indexで優先順位を定義することで対策する。

Discussion