Tailwind CSSを使用したボタンの例

1. 基本的なボタン:

   <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
   クリックしてください
   </button>

このコードは、青い背景色でホバー時に濃い青色になるボタンを作成します。

2. アウトラインボタン:

   <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow">
   クリックしてください
   </button>

このコードは、白い背景色でホバー時に灰色になるアウトラインボタンを作成します。

3. アイコン付きボタン:

   <button class="flex items-center justify-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
   <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
   <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
   <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM10 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd" />
   </svg>
   ボタン
   </button>

このコードは、アイコンとテキストが組み合わさったボタンを作成します。

これらはいくつかの基本的な例ですが、Tailwind CSSではさまざまなスタイル設定が可能です。詳細なドキュメントやデザインガイドを参照して、さまざまなボタンスタイルを作成する方法を学ぶことができます。