【React初心者メモ】mとpの指定方法

TailwindCSSのマージンとパディングの指定方法がややこしいので、まとめておきます。

パディング（p系ユーティリティ）

全方向指定

p-<n>: 全辺に同じスペースを適用
（<n>はデフォルトでp-0からp-96間で提供されており、1→4px, 2→8px, 3→12px, 4→16px…のように設定されており、tailwind.config.jsで指定されている）

<div class="p-4">/* 上下左右16px */</div>

軸別指定

px-<n>: 左右 (padding-left, padding-right)
py-<n>: 上下 (padding-top, padding-bottom)

<div class="px-8 py-2">
  /* 左右32px、上下8px */
</div>

辺別指定

pt-<n>: 上
pr-<n>: 右
pb-<n>: 下
pl-<n>: 左

<div class="pt-6 pl-3">/* 上24px、左12px */</div>

カスタム値指定

p-[], px-[] のように [] で囲むと任意の値を直接指定可

<div class="p-[5px]">/* 上下左右5px */</div>
<div class="px-[2.5rem]">/* 左右2.5rem */</div>

マージン（m系ユーティリティ）

全方向指定

m-<n>: 全辺に同じスペースを適用
（<n>はデフォルトでm-0からm-96間で提供されており、1→4px, 2→8px, 3→12px, 4→16px…のように設定されており、tailwind.config.jsで指定されている）

<div class="m-8">/* 上下左右32px */</div>

軸別指定

mx-<n>: 左右 (padding-left, padding-right)
my-<n>: 上下 (padding-top, padding-bottom)

<div class="mx-4 my-2">
  /* 左右16px、上下8px */
</div>

辺別指定

mt-<n>: 上
mr-<n>: 右
mb-<n>: 下
ml-<n>: 左

<div class="mt-6 mb-1">/* 上24px、下4px */</div>

カスタム値指定

m-[], mx-[] のように [] で囲むと任意の値を直接指定可

<div class="m-[10vh]">/* 全方向10vh */</div>