React + Tailwind CSSでホバー時のスタイルを適用する方法

こんにちは、shootaceanです。
React + Tailwind CSSでホバー時のスタイルを適用する方法を紹介します。

更新履歴

• 2024-05-16 : CSS Custom Propertyを利用した方法を追記 ( ご提供 : @honey32 様 )
  • MouseEventを利用した方法よりも断然こっちが良い…！

結論

CSS Custom Propertyを利用して、ホバー時のスタイルを適用する方法が一番シンプルで良いです。
JavaScriptの onMouseEnter / onMouseLeave でホバー状態を制御して、適用するスタイルを切り替える。

（もし、他の実装方法があれば教えてください🙏）

理由

理由としては下記の2点です。

1. TailwindCSSのJITでは folor-[${color}] ( color = #FFFFFF ) のように動的なカラーコードを指定すると、ビルド時に値が確定されていないため色指定が反映されない
2. style属性のインラインスタイルでは :hover などの擬似要素を使用できない

上記の理由から、インラインスタイル、TailwindCSSのどちらも利用できないため、他の方法を探す必要があります。

検証コード

https://codesandbox.io/p/devbox/hover-style-with-react-tailwind-9flyrx?embed=1&file=%2Fsrc%2FApp.tsx

App.tsx

import { useState } from "react";

function App() {
  const [color, setColor] = useState<string>("#000000");
  // Pattern : MouseEvent
  // const [isHover, setIsHover] = useState<boolean>(false);
  return (
    <div className="p-4">
      <p
        // not working
        // className={`hover:bg-[${color}]`}
        // Pattern : CSS Custome Property
        className="hover:bg-[--bg-color-hover]"
        style={{ "--bg-color-hover": color }}
        // Pattern : MouseEvent
        // style={{ backgroundColor: isHover ? color : "#FFFFFF" }}
        // onMouseEnter={() => setIsHover(true)}
        // onMouseLeave={() => setIsHover(false)}
      >
        Hover Me
      </p>
      <input
        type="color"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
    </div>
  );
}

export default App;

Appendix

記事を書く中での学びと疑問

• スマートフォンなどのマウスカーソルが無いデバイスでのホバー時スタイルをどのように考えるか？
  • モバイルファーストのUIで、ホバー周りの装飾にこだわる必要性がどれだけあるのか？
  • @media(hover: hover) { ... } でマウスカーソルがあるデバイスのみ適用させられる
  • 【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
  • 【CSS】スマホではホバーさせない簡単な方法 | D-Grip システム -制作部
• コンポーネント内で定義したCSSカスタムプロパティは他コンポーネントに影響しないのか？0