Tailwind CSSでは、グラデーションボタンが簡単に実装できます。グラデーションの方向も、クラス名一つで簡単に変更できるので便利です。グラデーションボタンの作り方をご紹介します。

横方向のグラデーションボタン

<button class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 text-white font-bold py-2 px-4 rounded">
  BUTTON
</button>

クラスの説明：

• bg-gradient-to-r: グラデーションを左から右（right）に適用する。
• from-green-400: グラデーションの開始色を緑に設定。
• via-blue-500: グラデーションの途中に青を追加。
• to-purple-600: グラデーションの終了色を紫に設定。
• text-white: 文字色を白に設定。
• font-bold: 文字を太字に。
• py-2: 上下に0.5rem（8px）のパディングを設定。
• px-4: 左右に1rem（16px）のパディングを設定。
• rounded: 角を丸くする。

縦方向グラデーションボタン

<button class="bg-gradient-to-b from-pink-500 to-yellow-500 text-white font-bold py-2 px-4 rounded">
  BUTTON
</button>

bg-gradient-to-b: グラデーションを上から下（bottom）に適用。

斜め方向のグラデーションボタン

<button class="bg-gradient-to-br from-teal-400 to-blue-600 text-white font-bold py-2 px-4 rounded-lg">
  BUTTON
</button>

bg-gradient-to-br: グラデーションを左上から右下（bottom right）に適用。

終わりに

綺麗なグラデーションカラーのボタンが簡単に実装できるTailwind CSSのコードをご紹介しました。ぜひ使ってみてください！