はじめに
Tailwind CSSを最近使い始めました。以前からBootstrapなどでユーティリティクラスを使ってインラインで装飾することが多かったので、Tailwind cssにはしっくり来ています。
コンポーネントを作りたいときにコピペできるコードがあったら良いので、とりあえずボタンだけ作りました。そのうち別なコンポーネントも作ります。
普通のボタン
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-white font-semibold rounded hover:bg-blue-500">Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-yellow-400 text-white font-semibold rounded hover:bg-yellow-500">Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-red-400 text-white font-semibold rounded hover:bg-red-500">Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-green-400 text-white font-semibold rounded hover:bg-green-500">Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-indigo-400 text-white font-semibold rounded hover:bg-indigo-500">Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-xs text-white font-semibold rounded hover:bg-blue-500">小さいButton</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded hover:bg-blue-500">大きいButton</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-xl text-white font-semibold rounded hover:bg-blue-500">更に大きいButton</button>
</div>アウトラインボタン
<div class="m-3">
<button class="px-2 py-1 text-blue-500 border border-blue-500 font-semibold rounded hover:bg-blue-100">Blue Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 text-yellow-500 border border-yellow-500 font-semibold rounded hover:bg-yellow-100">Yellow Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 text-red-500 border border-red-500 font-semibold rounded hover:bg-red-100">Red Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 text-green-500 border border-green-500 font-semibold rounded hover:bg-green-100">Green Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 text-indigo-500 border border-indigo-500 font-semibold rounded hover:bg-indigo-100">Indigo Button</button>
</div>ボタンサイズ
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-xs text-white font-semibold rounded hover:bg-blue-500">XSmall Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-sm text-white font-semibold rounded hover:bg-blue-500">Small Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-base text-white font-semibold rounded hover:bg-blue-500">Nomal Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded hover:bg-blue-500">Large Button</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-xl text-white font-semibold rounded hover:bg-blue-500">XLarge Button</button>
</div>丸いボタン
<div class="m-3">
<button class="w-12 h-12 bg-blue-400 text-lg text-white font-semibold rounded-full hover:bg-blue-500">1</button>
</div>
<div class="m-3">
<button class="px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded-full hover:bg-blue-500">端が丸い</button>
</div>フローティング
<div class="m-3">
<button class="shadow-lg px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded hover:bg-blue-500">浮いてるボタン</button>
</div>アニメーション
hover時に沈むボタン
<div class="m-3">
<button class="shadow-lg px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded hover:bg-blue-500 hover:shadow-sm hover:translate-y-0.5 transform transition ">沈むボタン</button>
</div>hover時に浮いてくるボタン
<div class="m-3">
<button class="shadow-lg px-2 py-1 bg-blue-400 text-lg text-white font-semibold rounded hover:bg-blue-500 hover:shadow-sm hover:translate-y-0.5 transform transition ">浮いてくるボタン</button>
</div>
コメント