Tailwind CSSで何もクラスを指定しなかった場合のボタンは、次のように表示される。
<button>
Button
</button>Tailwind CSSを使ってボタンのラベルと背景に色を付ける。
<button class="bg-gray-200 hover:bg-gray-100 text-white rounded px-4 py-2">Gray 200</button>
<button class="bg-gray-300 hover:bg-gray-200 text-white rounded px-4 py-2">Gray 300</button>
<button class="bg-gray-400 hover:bg-gray-300 text-white rounded px-4 py-2">Gray 400</button>
<button class="bg-gray-500 hover:bg-gray-400 text-white rounded px-4 py-2">Gray 500</button>
<button class="bg-gray-600 hover:bg-gray-500 text-white rounded px-4 py-2">Gray 600</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded px-4 py-2">Gray 700</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white rounded px-4 py-2">Gray 800</button>
<button class="bg-gray-900 hover:bg-gray-800 text-white rounded px-4 py-2">Gray 900</button><button class="bg-red-200 hover:bg-red-100 text-white rounded px-4 py-2">Red 200</button>
<button class="bg-red-300 hover:bg-red-200 text-white rounded px-4 py-2">Red 300</button>
<button class="bg-red-400 hover:bg-red-300 text-white rounded px-4 py-2">Red 400</button>
<button class="bg-red-500 hover:bg-red-400 text-white rounded px-4 py-2">Red 500</button>
<button class="bg-red-600 hover:bg-red-500 text-white rounded px-4 py-2">Red 600</button>
<button class="bg-red-700 hover:bg-red-600 text-white rounded px-4 py-2">Red 700</button>
<button class="bg-red-800 hover:bg-red-700 text-white rounded px-4 py-2">Red 800</button>
<button class="bg-red-900 hover:bg-red-800 text-white rounded px-4 py-2">Red 900</button><button class="bg-green-200 hover:bg-green-100 text-white rounded px-4 py-2">Green 200</button>
<button class="bg-green-300 hover:bg-green-200 text-white rounded px-4 py-2">Green 300</button>
<button class="bg-green-400 hover:bg-green-300 text-white rounded px-4 py-2">Green 400</button>
<button class="bg-green-500 hover:bg-green-400 text-white rounded px-4 py-2">Green 500</button>
<button class="bg-green-600 hover:bg-green-500 text-white rounded px-4 py-2">Green 600</button>
<button class="bg-green-700 hover:bg-green-600 text-white rounded px-4 py-2">Green 700</button>
<button class="bg-green-800 hover:bg-green-700 text-white rounded px-4 py-2">Green 800</button>
<button class="bg-green-900 hover:bg-green-800 text-white rounded px-4 py-2">Green 900</button><button class="bg-blue-200 hover:bg-blue-100 text-white rounded px-4 py-2">Blue 200</button>
<button class="bg-blue-300 hover:bg-blue-200 text-white rounded px-4 py-2">Blue 300</button>
<button class="bg-blue-400 hover:bg-blue-300 text-white rounded px-4 py-2">Blue 400</button>
<button class="bg-blue-500 hover:bg-blue-400 text-white rounded px-4 py-2">Blue 500</button>
<button class="bg-blue-600 hover:bg-blue-500 text-white rounded px-4 py-2">Blue 600</button>
<button class="bg-blue-700 hover:bg-blue-600 text-white rounded px-4 py-2">Blue 700</button>
<button class="bg-blue-800 hover:bg-blue-700 text-white rounded px-4 py-2">Blue 800</button>
<button class="bg-blue-900 hover:bg-blue-800 text-white rounded px-4 py-2">Blue 900</button>ボタンの色にグラデーションを付けることもできる。
<button class="bg-gradient-to-r from-gray-100 to-gray-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Gray</button>
<button class="bg-gradient-to-r from-red-100 to-red-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Red</button>
<button class="bg-gradient-to-r from-green-300 to-green-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Green</button>
<button class="bg-gradient-to-r from-blue-300 to-blue-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Blue</button><button class="bg-gradient-to-b from-gray-300 to-gray-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Gray</button>
<button class="bg-gradient-to-b from-red-300 to-red-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Red</button>
<button class="bg-gradient-to-b from-green-300 to-green-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Green</button>
<button class="bg-gradient-to-b from-blue-300 to-blue-800 hover:bg-gradient-to-l text-white rounded px-4 py-2">Blue</button><button class="bg-gradient-to-br from-gray-300 to-gray-800 hover:bg-gradient-to-tl text-white rounded px-4 py-2">Gray</button>
<button class="bg-gradient-to-br from-red-300 to-red-800 hover:bg-gradient-to-tl text-white rounded px-4 py-2">Red</button>
<button class="bg-gradient-to-br from-green-300 to-green-800 hover:bg-gradient-to-tl text-white rounded px-4 py-2">Green</button>
<button class="bg-gradient-to-br from-blue-300 to-blue-800 hover:bg-gradient-to-tl text-white rounded px-4 py-2">Blue</button>ボタンの横幅を絶対値で指定する。
<button class="bg-green-100 w-24">w-24</button><button class="bg-green-100 w-32">w-32</button><button class="bg-green-100 w-40">w-40</button><button class="bg-green-100 w-48">w-48</button><button class="bg-green-100 w-56">w-56</button><button class="bg-green-100 w-64">w-64</button>ボタンの横幅を相対値で指定する。
<button class="bg-green-100 w-1/2">w-1/2</button><button class="bg-green-100 w-1/3">w-1/3</button><button class="bg-green-100 w-1/4">w-1/4</button>ボタンの横幅を親要素の幅いっぱいにする。
<button class="bg-green-100 w-full">w-full</button>ボタンの高さを絶対値で指定する。
<button class="bg-green-100 h-8">h-8</button><button class="bg-green-100 h-12">h-12</button>親要素の高さに対する相対値でボタンの高さを指定する。
<div class="h-12 border border-solid">
<button class="bg-green-100 h-12">h-12</button>
</div>ボタンの高さを親要素の高さいっぱいにする。
<div class="h-12 border border-solid">
<button class="bg-green-100 h-full">h-full</button>
</div>カーソルがボタンの上に乗ったときのスタイルを指定するには、hover: 接頭辞を付ける。
<button class="bg-blue-500 hover:bg-blue-700 text-white px-2 py-1">
Button
</button>ボタンを無効にするには、button 要素に disabled 属性を指定する。
<button disabled class="bg-blue-500 hover:bg-blue-700 text-white px-2 py-1">
Button
</button>ただし、これではボタンが無効であることが視覚的にわかりにくい。ボタンの上にカーソルを乗せたときに、ボタンをクリックできないことを視覚的に表わすために、次に示す Tailwind CSS のクラスを指定する。
| クラス | 説明 |
|---|---|
| cursor-not-allowed | ボタンにマウスカーソルを乗せたとき、禁止を表わす形状にする。 |
| opacity-50 | ボタンの背景色を薄くする。 |
<button disabled class="bg-blue-500 hover:bg-blue-700 text-white px-2 py-1 opacity-50 cursor-not-allowed">
Button
</button>Tailwind CSS を使って不透明度を設定するには、下記に示すクラスを指定する。不透明度はボタンのラベルと背景の両方に適用される。
<button class="opacity-0 bg-blue-500 text-white px-2 py-1">Opacity 0</button>
<button class="opacity-5 bg-blue-500 text-white px-2 py-1">Opacity 5</button>
<button class="opacity-10 bg-blue-500 text-white px-2 py-1">Opacity 10</button>
<button class="opacity-20 bg-blue-500 text-white px-2 py-1">Opacity 20</button>
<button class="opacity-25 bg-blue-500 text-white px-2 py-1">Opacity 25</button>
<button class="opacity-30 bg-blue-500 text-white px-2 py-1">Opacity 30</button>
<button class="opacity-40 bg-blue-500 text-white px-2 py-1">Opacity 40</button>
<button class="opacity-60 bg-blue-500 text-white px-2 py-1">Opacity 60</button>
<button class="opacity-70 bg-blue-500 text-white px-2 py-1">Opacity 70</button>
<button class="opacity-75 bg-blue-500 text-white px-2 py-1">Opacity 75</button>
<button class="opacity-80 bg-blue-500 text-white px-2 py-1">Opacity 80</button>
<button class="opacity-90 bg-blue-500 text-white px-2 py-1">Opacity 90</button>
<button class="opacity-95 bg-blue-500 text-white px-2 py-1">Opacity 95</button>
<button class="opacity-100 bg-blue-500 text-white px-2 py-1">Opacity 100</button><button class="rounded bg-gray-300 px-4 py-2">
Button
</button><button class="rounded-md bg-gray-300 px-4 py-2">
Button
</button><button class="rounded-lg bg-gray-300 px-4 py-2">
Button
</button><button class="rounded-full bg-gray-300 px-4 py-2">
Button
</button>Tailwind CSS を使ってボタンに影を付ける場合、次に示すクラスで影の大きさを指定する。
<button class="shadow-sm rounded px-2 py-1">Subscribe</button>
<button class="shadow rounded px-2 py-1">Subscribe</button>
<button class="shadow-md rounded px-2 py-1">Subscribe</button>
<button class="shadow-lg rounded px-2 py-1">Subscribe</button>
<button class="shadow-xl rounded px-2 py-1">Subscribe</button>
<button class="shadow-2xl rounded px-2 py-1">Subscribe</button>Tailwind CSS を使ってボタンに影を付ける場合、次に示すクラスで影の色を指定できる。
<button class="shadow-lg bg-black shadow-black/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-slate-500 shadow-slate-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-gray-500 shadow-gray-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-zinc-500 shadow-zinc-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-neutral-500 shadow-neutral-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-stone-500 shadow-stone-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-red-500 shadow-red-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-orange-500 shadow-orange-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-amber-500 shadow-amber-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-yellow-500 shadow-yellow-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-lime-500 shadow-lime-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-green-500 shadow-green-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-emerald-500 shadow-emerald-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-teal-500 shadow-teal-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-cyan-500 shadow-cyan-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-sky-500 shadow-sky-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-blue-500 shadow-blue-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-indigo-500 shadow-indigo-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-violet-500 shadow-violet-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-purple-500 shadow-purple-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-fuchsia-500 shadow-fuchsia-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-pink-500 shadow-pink-500/50 text-white rounded px-2 py-1">Submit</button>
<button class="shadow-lg bg-rose-500 shadow-rose-500/50 text-white rounded px-2 py-1">Submit</button>