「MedTimer お薬タイマー」という、薬を服用できる時間がわかるWebアプリを個人開発しています。
開発ログ↓
その開発中に、画面の余白（マージン）の調整でつまずきました。
ReactとTailwind CSSで作っているのですが、「ここの間隔をもう少し広げたいな」と思って数字を変えても、なぜか見た目が変わらない…ということが何度もありました。
結局Claude Codeに聞きながらなんとか対応したのですが、自分の中でまだしっくり理解できていなかったので、あらためて調べたことをまとめておきます。
同じところで止まっている方の役に立ったらうれしいです。
そもそも mb-6 の「6」って何の数字？
Tailwindを触りはじめたころ、私は mb-6 の「6」を「6px」くらいの感覚でなんとなく使っていました。
でも実際に確認してみると、そうではありませんでした。
いま使っているTailwind v4では、余白（m-* p-* gap-* など）は
固定のピクセル表ではなく、--spacing という1つの変数の掛け算で作られているようです。
ブラウザの検証ツールで mb-6 の中身を見ると、こう書いてありました。
margin-bottom: calc(var(--spacing) * 6);この --spacing の既定値は 0.25rem、つまり4pxです。
0.25rem というのは最初から組み込まれています。
自分で定義しておく必要はないのですが、初期値の0.25remを別の値に変えたいときだけ変数を指定するができます。
なので計算すると、mb-6 は 4px × 6 = 24px ということになります。
「数字1つあたり4px」と覚えておくとラクだと思いました。
4px刻みの早見表
よく使う数字を表にしておきます。
| クラス | 実際のpx |
|---|---|
| mb-2 | 8px |
| mb-4 | 16px |
| mb-5 | 20px |
| mb-6 | 24px |
| mb-8 | 32px |
| mb-10 | 40px |
全部「数字 × 4px」になっているのがわかると思います。
なぜ px 直書きじゃなくて calc / var なの？
ここが最初「なんでこんな回りくどいことをするんだろう」と思ったところです。
調べた範囲では、この掛け算方式には2つのメリットがあるようです。
1つめは、4の倍数以外の好きな数字も自動で作れることです。
たとえば mb-7（28px）、mb-9（36px）、mb-13（52px）のような中途半端な数字も、いちいち定義しなくても計算で出てきます。
2つめは、--spacing を1か所変えるだけで、アプリ全体の余白をまとめて拡大・縮小できることです。
これはTailwind v4で採用された新しい設計とのことでした。
言われてみれば、余白の基準を1つの変数に集約しておけば、あとから「全体的にちょっと詰まって見えるな」と思ったときに一括で調整できます。
私はまだそこまで使いこなせていませんが、しくみがわかると納得できました。
数字を変えても余白が変わらないとき
ここが私が一番ハマったところです。
mb-6 を mb-10 に変えたのに、画面の余白がびくともしない。
<h1 className="mb-6"> ← 出る
<h1 className="mb-8"> ← 消える調べてみると、こういうときの原因はだいたい次の3つのどれかのようです。
原因1：クラス名を変数やテンプレートで組み立てている
これが一番わかりにくくて、私も理解するのに時間がかかりました。
Tailwindは、ソースコードにそのままの文字列で書かれたクラス名しか生成しないそうです。
つまり、数字を変数で連結して作ったクラスは拾ってもらえません。
効く書き方と効かない書き方を並べるとこうなります。
// 効く：mb-8 がそのまま文字列で書いてある
className="mb-8"
className={`mb-8 ${FIELD_BG}`}
// 効かない：mb- のあとを変数でつないでいる
className={`mb-${n}`}下の書き方だと、コードの中に mb-8 という完成した文字列がどこにも存在しません。
Tailwindからすると「そんなクラス書いてないよね？」という扱いになって、CSSが作られないというわけでした。
わたしがハマったケースの原因じゃなかったのですが、知らないと絶対に気づけないところなので、これは覚えておこうと思いました。
原因2：上下マージンの相殺（margin collapsing）
2つめは、CSSのもともとの仕様の話です。
隣り合った要素の margin-bottom と margin-top は、足し算されずに「大きいほうだけ」が効きます。
これは margin collapsing（マージンの相殺）と呼ばれる挙動です。
なので、片方の余白を増やしても、もう片方のほうが大きいままだと見た目が変わらない、ということが起きます。
「増やしたのに動かない」と思ったら、上下の要素の余白も一緒に見てみるといいと思います。
原因3：開発サーバーが変更を拾えていない
3つめは、コードのせいではなくツール側の問題です。
Tailwind v4はソースを走査して、書かれているクラスだけをCSSに含めるとのこと。
まれに開発サーバーの自動反映（HMR）が追いつかず、変更が画面に出ないことがあるようです。
私も一度、コードは合っているはずなのに反映されなくて焦ったことがありました。
原因としては
mb-6 はすでにどこかで使われていたので生成済み、mb-8 は新規に書いた瞬間なので、まだCSSに追加されていない
という状態の可能性が高いとのこと。
そういうときは、書き方を帰るのではなく、開発サーバー npm run dev を再起動すると直る場合があります。
Ctrl + C で止める → npm run dev で再起動
原因1・2を確認しても変わらないなら、最後にサーバー再起動を試すくらいの順番でいいと思います。
私が実際に使った余白の調整方法
ここからは、私が開発中に実際に使った調整のやり方を、わかりやすかった順に書いていきます。
方法A：数字を変える（4px刻み）
一番シンプルなのは、クラスの数字を変えるやり方です。
mb-6 → mb-8 /* 24px → 32px */4px刻みでよければ、これで十分だと思います。
ただ、刻みが4pxなので「あと3pxだけ足したい」みたいな細かい調整はできません。
方法B：pxやremをピタッと指定する（角かっこの任意値）
私にとって一番わかりやすかったのがこれです。
角かっこ [ ] の中に数値を書くと、何pxでも確実に指定できます。
mb-[30px] /* ちょうど30px */
mb-[2.5rem] /* remでも指定できる */
pt-[50px] /* ログイン画面ではこれを使いました */4px刻みに縛られないので、「ここはどうしても30pxにしたい」というときに迷わず効きます。
お薬タイマーのログイン画面の余白は、この角かっこ指定で合わせました。
方法C：アプリ全体の余白をまとめて変える（–spacing を変更）
最後は、余白の基準そのものを変えるやり方です。
src/index.css の @theme { … } の中に一行足すだけで、m-* p-* gap-* すべてが連動して拡大・縮小します。
@import "tailwindcss";
@theme {
--spacing: 0.3rem; /* 初期値0.25remを上書きしたいときだけ */
}これは個別のクラスをいじるのとは逆で、アプリ全体のバランスをまとめて調整したいときの方法です。
1か所直すだけで全体に効くぶん影響も大きいので、私はまず方法A・Bで個別に対応して、全体の余白感を見直したいときにこれを使うくらいの温度感でいます。
まとめ
今回つまずいて調べたことで、mb-6 がただの「6px」ではなく calc(var(--spacing) * 6) という掛け算だったこと、そしてTailwind v4では1つの変数で余白全体をコントロールしていることがわかりました。
数字を変えても余白が動かないときは、クラス名を変数で組み立てていないか、上下マージンの相殺が起きていないか、開発サーバーが反映できているか、の3つを順番に見ると原因にたどり着きやすいと思います。
調整のやり方としては、4px刻みでいいなら数字を変える、細かくpx指定したいなら角かっこの任意値、全体をまとめて変えたいなら --spacing、という3段構えで考えると整理しやすかったです。
私自身まだ手探りで、Claude Codeに助けてもらいながら進めている段階です。
それでも「なぜこう書くのか」が少しわかると、次に似たところで止まったときに自分で直せる気がしてきました。
このお薬タイマー自体の開発の話は別の記事にまとめています↓
他のTailwind CSSのチートシートは別記事にしているのでご参照ください↓
配色について悩んだことがあるので、こちらもご参照ください↓
