[Tailwind CSS] ボタンUI

🌱 はじめに

この記事では、Tailwind CSS でよく使うボタン（登録・削除・戻る）のデザインを紹介します。

各ボタンは、下記サイト（Tailwind Play）で表示を確認しています。

画像は Tailwind CSS v3 で表示したものです。v4 では、ボタンにマウスを乗せたときのカーソルが指の形（pointer）から矢印（default）に変わりました。指の形にしたい場合は、cursor-pointerを追加してください。

🌱 1. 「登録」のボタン

<button type="button" class="py-1 px-5 bg-sky-500 rounded-2xl text-white font-black">登録</button>

工夫ポイント

1. プライマリーカラーなどの色を使用することで、この後にイベントが発生することをイメージさせる
2. 文字を白色にすることで、背景色との対比で文字を目立たせ、テキストではなくボタンであることを強調する
3. ボタンの角を丸くすることで、ボタンらしさを強調する

🌱 2. 「削除」のボタン

<button type="button" class="py-1 px-5 bg-red-500 rounded-2xl text-white font-black">削除</button>

工夫ポイント

1. 警告カラーを使用することで、この後に重大なイベントが発生することをイメージさせる
2. 文字を白色にすることで、背景色との対比で文字を目立たせ、テキストではなくボタンであることを強調する
3. ボタンの角を丸くすることで、ボタンらしさを強調する

🌱 3. 「戻る」のボタン

<button type="button" class="py-1 px-5 bg-gray-100/50 border border-gray-200 rounded-2xl">戻る</button>

工夫ポイント

1. これまでのボタンと異なり、グレーを使用することで、この後に影響の小さい操作が行われることをイメージさせる
2. ボタンの角を丸くすることで、ボタンらしさを強調する

🌱 補足

• <button>は、<form>の中に置くと、typeを省略した場合にtype="submit"として動きます。フォームを送信しないボタンにはtype="button"を付けます。
• 白い文字とbg-sky-500・bg-red-500の組み合わせは、WCAG が本文に求めるコントラスト比（4.5:1）を満たしません。読みやすさを重視する場合は、bg-sky-700やbg-red-600のように濃い色を使います。
• 枠線の色を指定しないborderは、v3 ではgray-200、v4 では文字色（currentColor）になります。バージョンによらず同じ見た目にするため、border-gray-200を指定しています。