Tailwindボタンの例

2024-02-09 22:19 Tailwindボタンスタイルコード例
  1. 基本的なボタン: Tailwindの基本的なボタンスタイルを使って、シンプルなボタンを作成することができます。以下はその例です。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>
  1. アウトラインボタン: アウトラインスタイルのボタンを作成するには、bg-transparentクラスとborderクラスを組み合わせます。以下はその例です。
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  ボタン
</button>
  1. アイコン付きボタン: Tailwindを使ってアイコン付きのボタンを作成することもできます。以下はその例です。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  <svg class="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
  </svg>
  ボタン
</button>

これらはいくつかのTailwindボタンの例ですが、さらに多くのスタイルやカスタマイズオプションがあります。Tailwindの公式ドキュメントを参照して、さまざまなボタンスタイルを学ぶことをおすすめします。