- HTML要素に適用するクラスを定義します。例えば、ボタンにホバーカラーを設定したい場合は、次のようなクラスを使用します。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
ボタン
</button>上記の例では、bg-blue-500クラスがボタンの通常の背景色を指定し、hover:bg-blue-700クラスがボタンがホバーされたときの背景色を指定しています。
-
ホバーカラーを定義するために、Tailwind CSSのカラーパレットから適切な色を選択します。上記の例では、通常の背景色には
bg-blue-500を使用していますが、ホバーカラーにはbg-blue-700を使用しています。 -
必要に応じて他のスタイルプロパティも適用することができます。上記の例では、テキストの色を白色に設定するために
text-whiteクラスを追加しています。また、フォントの太字スタイルを指定するためにfont-boldクラスも追加しています。
これで、ホバーカラーが設定されたボタンが表示されます。ユーザーがボタン上にマウスを移動すると、ホバーカラーが適用されます。
以上が、Tailwind CSSを使用してホバーカラーを設定する方法の基本的な手順です。必要に応じて他の要素にも同様の手順を適用することができます。