🎨
【Tailwind CSS】ホバー時に反転するグラデーションボタンを作る小ワザ
概要
Tailwind CSSでホバー時に反転するグラデーション（背景色）ボタンを作成するときのちょっとした小ワザを（たまたま発見したので）残しておきます。
※普通に知られていることだったらすみませんm(__)m笑
完成品
こんなボタンを作成したい。
（左：通常時、右：ホバー時）
コード
<div class="p-10">
<button class="bg-gradient-to-b from-blue-800 to-blue-400 text-white py-2 px-6 rounded-md text-2xl">反転前</button>
<button class="bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400 text-white py-2 px-6 rounded-md text-2xl">反転後</button>
</div>
上コードのこの部分がグラデーションを反転するためのコードです。
bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400
（Tailwind CSSのHPでブラウザエディターが使えます）
グラデーション（背景色）の付け方
公式ドキュメント通りです。
上から下にかけてグラデーションをつけたい場合はbg-gradient-to-bをタグのclassに指定してあげて、
-
from-色：始点（１番上）の色 -
to-色：終点（１番下）に色
を指定します。
なので、全体としてはこんな感じです。
class="bg-gradient-to-b from-色 to-色"
ホバー時の反転
Tailwind CSSでホバー時のスタイルを定義する時は
class="hover:bg-red-300"
みたいにhover:をつけます。
今回のケースだと
通常時：bg-gradient-to-b from-blue-800 to-blue-400
ホバー時（反転時）：bg-gradient-to-t from-blue-800 to-blue-400
をそれぞれclass属性に設定しなければならないのかと思いました。
でもこの設定で反転できた。
bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400
（ちなみにhover:bg-gradient-to-tの記載位置はclass属性の中のどこでもOK）
最後に
Tailwind CSSは業務でNext.jsを使うことになってせっかくなのでと思って導入したけど、.tsxファイルだけでコーディングもスタイルも（ほぼ）完結できるので便利だなと思いました！
（クラス名を全然知らないのでめちゃくちゃググっているけどw）
Discussion