Tailwind CSS

JS

flex

flex
justify-center
items-center
gap-4

grid

grid
grid-cols-2
md:grid-cols-3 ←画面幅が 768px以上(中サイズ以上)(注意→ me:の後にスペースを入れない)
gap-6

Tailwindの標準ブレークポイント

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

padding

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
font-bold
font-medium
text-gray-500
text-black
text-center