ユーティリティクラス
よく使うユーティリティクラスを覚えよう
スペーシング
padding と margin
p-, m- で余白を指定
html
<!-- padding -->
<div class="p-4">全方向 1rem</div>
<div class="px-4">左右 1rem</div>
<div class="py-2">上下 0.5rem</div>
<div class="pt-8">上だけ 2rem</div>
<!-- margin -->
<div class="m-4">全方向 1rem</div>
<div class="mx-auto">左右auto（中央寄せ）</div>
<div class="mt-8">上だけ 2rem</div>
<div class="-mt-4">負のmargin</div>プレビュー
p-4 (padding: 1rem)
px-4 py-2
mx-auto
スペーシングの値
0 = 0
1 = 0.25rem
2 = 0.5rem
3 = 0.75rem
4 = 1rem
6 = 1.5rem
8 = 2rem
12 = 3rem
サイズ
width と height
w-, h- でサイズ指定
html
<!-- 固定幅 -->
<div class="w-64">256px</div>
<div class="w-1/2">50%</div>
<div class="w-full">100%</div>
<!-- 高さ -->
<div class="h-screen">画面高さ</div>
<div class="h-full">親要素の100%</div>
<!-- 最大・最小 -->
<div class="max-w-md">最大448px</div>
<div class="min-h-screen">最小画面高さ</div>プレビュー
w-64 (256px)
w-1/2 (50%)
w-full (100%)
タイポグラフィ
テキスト関連
フォントサイズ、太さ、配置
html
<!-- サイズ -->
<p class="text-xs">極小</p>
<p class="text-sm">小</p>
<p class="text-base">基準</p>
<p class="text-lg">大</p>
<p class="text-xl">特大</p>
<p class="text-2xl">2倍</p>
<!-- 太さ -->
<p class="font-light">細い</p>
<p class="font-normal">通常</p>
<p class="font-medium">中太</p>
<p class="font-semibold">やや太い</p>
<p class="font-bold">太い</p>
<!-- 配置 -->
<p class="text-left">左揃え</p>
<p class="text-center">中央</p>
<p class="text-right">右揃え</p>プレビュー
text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl font-bold
色
テキスト色と背景色
text-, bg- で色を指定
html
<!-- テキスト色 -->
<p class="text-gray-500">グレー</p>
<p class="text-red-500">赤</p>
<p class="text-blue-500">青</p>
<p class="text-green-500">緑</p>
<!-- 背景色 -->
<div class="bg-gray-100">薄いグレー背景</div>
<div class="bg-blue-500">青背景</div>
<!-- 透明度付き -->
<div class="bg-black/50">50%透明の黒</div>プレビュー
text-gray-500text-red-500text-blue-500text-green-500
bg-gray-100
bg-blue-500
色の濃さ
50
100
200
300
400
500
600
700
800
900
50(薄い) → 900(濃い)
ボーダー
枠線と角丸
border, rounded
html
<!-- 枠線 -->
<div class="border">1pxの枠線</div>
<div class="border-2">2pxの枠線</div>
<div class="border-b">下線のみ</div>
<div class="border-gray-300">グレーの枠線</div>
<!-- 角丸 -->
<div class="rounded">少し丸い</div>
<div class="rounded-lg">もっと丸い</div>
<div class="rounded-full">完全に丸い</div>
<!-- 組み合わせ -->
<div class="border-2 border-blue-500 rounded-lg">
青い枠線、角丸
</div>プレビュー
rounded
rounded-lg
rounded-full
border-blue-500
シャドウ
ボックスシャドウ
shadow-* でシャドウを追加
html
<div class="shadow-sm">小さい影</div>
<div class="shadow">通常の影</div>
<div class="shadow-md">中くらい</div>
<div class="shadow-lg">大きい</div>
<div class="shadow-xl">特大</div>
<div class="shadow-2xl">超特大</div>
<div class="shadow-none">影なし</div>プレビュー
shadow-sm
shadow
shadow-md
shadow-lg
表示・非表示
display プロパティ
block, flex, grid, hidden
html
<div class="block">ブロック</div>
<div class="inline">インライン</div>
<div class="inline-block">インラインブロック</div>
<div class="flex">Flexbox</div>
<div class="grid">Grid</div>
<div class="hidden">非表示</div>
<!-- レスポンシブで切り替え -->
<div class="hidden md:block">
768px以上で表示
</div>
<div class="block md:hidden">
768px未満で表示
</div>プレビュー
flex itemflex item
grid
grid
grid