flex
flex
justify-center
items-center
gap-4grid
grid
grid-cols-2
md:grid-cols-3 ←画面幅が 768px以上（中サイズ以上）(注意→ me:の後にスペースを入れない)
gap-6Tailwindの標準ブレークポイント
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536pxpadding
px-4 → 左右
py-4 → 上下
pt-4 → 上
pb-4 → 下
pl-4 → 左
pr-4 → 右margin
mx-4 → 左右
my-4 → 上下
mt-4 → 上
mb-4 → 下
ml-4 → 左
mr-4 → 右mx-auto = margin-left/right auto数値の意味
p-1 = 0.25rem
p-2 = 0.5rem
p-4 = 1rem
p-8 = 2remテキスト
text-sm
text-base
text-lg
text-xl
text-2xl| クラス | サイズ | rem | px換算 |
|---|---|---|---|
| text-sm | 小さい | 0.875rem | 14px |
| text-base | 基本（標準） | 1rem | 16px |
| text-lg | 少し大きい | 1.125rem | 18px |
| text-xl | 大きめ | 1.25rem | 20px |
| text-2xl | さらに大きい | 1.5rem | 24px |
font-bold
font-medium
text-gray-500
text-black
text-center色
| クラス | 意味 |
|---|---|
| text-black | 黒 |
| text-white | 白 |
| text-red-500 | 赤 |
| text-blue-500 | 青 |
| text-green-500 | 緑 |
| text-yellow-500 | 黄 |
| text-gray-500 | グレー |
50 ← 超薄い
100
200
300
400
500 ← 基準
600
700
800
900
950 ← 超濃いテキストの色だけでなく、背景やボーダーも同様です。
text-{color}-{number}
bg-{color}-{number}
border-{color}-{number}hoverにはこう使えます。
hover:bg-blue-600ボーダー
border
border-gray-300
rounded
rounded-lg
shadow
shadow-md幅、高さ
w-full （width: 100%;）
w-1/2 (width: 50%;)
h-10 （height: 2.5rem; 約40px）
h-screen (height: 100vh;)
min-h-screen(min-height: 100vh;)フル画面中央配置
<div class="min-h-screen flex items-center justify-center">