※Tailwind CSSのチートシート兼プレイグラウンドを作りました。よかったら見ていってください。

Tailwind CSSでは、marginやpaddingの指定値が独自に体系化されている。記法は簡単だが、単位も覚えないと、余白の調整に手間取る。

また、ほかにline-heightやborder、width、height、box-sizingなどとの兼ね合いにも気を配っておきたいところだ。

記法

Tailwind CSSでは、marginやpaddingは以下のように記述する。

指定箇所 marginの例 paddingの例
全方位 m-4 p-4
上 mt-4 pt-4
右 ml-4 pl-4
下 mb-4 pb-4
左 ml-4 pl-4
左右 mx-4 px-4
上下 my-4 py-4
左右いずれか ms-4 ps-4
左右いずれか me-4 pe-4

無印のmとpは全方位、tとrとbとlは、top、right、bottom、leftの頭文字をくっつけただけである。めっちゃ簡単だ。覚えやすい。

残りは一見戸惑うかもしれない。xはX軸方向、yはY軸方向の余白を意味する。

また、sとeは、それぞれ*-inline-start、*-inline-endの略だ。ドキュメントの言語の方向に応じて余白を入れる。具体的には、併記されるdirectionプロパティの値に基づいて、余白の左右が逆転する。

値の単位

m-*やp-*のようにハイフンで繋がれている数値は、以下のような増加単位で増加していく。

範囲 増加単位 rem換算 px換算
0.5から4 0.5 0.125rem 2px
4から12 1 0.25rem 4px
12から16 2 0.5rem 8px
20から64 4 1rem 16px
64から80 8 2rem 32px
80から96 16 4rem 64px

この増加単位に沿わない値、例えば4.5とか13とか指定しても、デフォルトではクラスが定義されていないので何も起きない。

remはRoot emの略で、emは、文字通りMを意味する。印刷業界では文字サイズをMを基準に決めるそうで、それに由来する語とのことだ。余談だ。

Root emは、ドキュメントに指定された文字サイズを意味する。Tailwind CSSでは、主にrem単位を用いることで、一貫したビジュアルを手軽に実現できるようデザインされている。

また、このほかに0px、1px、あるいは任意の値をピクセルかパーセントで指定することもできる。

– marginの例 paddingの例
0px m-0 p-0
1px m-px p-px
任意の値(px) m-[16px] p-[16px]
任意の値(%) m-[5%] p-[5%]

対象の箇所の指定は先のパターンと変わらないので省略する。

spaceについて

Tailwind CSSには、子要素が2つ以上存在する場合に、それらの上下（厳密には2つ目以降の上）・左右（厳密には同左）のmarginを指定できるspaceというユーティリティクラス（便利クラス）が用意されている。CSSと1対1で対応しているものが大部分だが、このような便利クラスが用意されているのもTailwind CSSの大きな特徴である。

spaceは、marginと違いspace-x-*、space-y-*という形をとる。

spaceの例 意味
space-x-4 要素> * + *に対してmargin-left:16px;
space-y-4 要素> * + *に対してmargin-top:16px;

対象の箇所の指定は先のパターンと変わらないので省略する。

また、以下のクラスを併記すると、余白を指定する方向を上下あるいは左右で逆転できる。

spaceの例 意味
space-x-reverse 要素> * + *に対して--tw-space-x-reverse: 1;
space-y-reverse 要素> * + *に対して--tw-space-y-reverse: 1;
html
<template>
  <!-- Tailwind CSSのコード -->
  <p>通常</p>
  <ul class="flex space-x-8">
    <li class="size-8 rounded-full bg-yellow-400"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:right-8"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:right-8"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:right-8"></li>
  </ul>
  <p>リバース</p>
  <ul class="flex space-x-8 space-x-reverse">
    <li class="size-8 rounded-full bg-yellow-400"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:left-8"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:left-8"></li>
    <li class="relative size-8 rounded-full bg-yellow-400 before:block before:size-8 before:border-x-2 before:border-dashed before:border-slate-900 before:absolute before:left-8"></li>
  </ul>
 <!-- ここまで -->

  <script src="https://cdn.tailwindcss.com"></script>
</template>
<div style="overflow:auto;width:100%;">
  <iframe></iframe>
</div>
<script>
  const iframe = document.querySelector("iframe");
  iframe.srcdoc = document.querySelector("template").innerHTML;
</script>

関連するプロパティの指定値

Tailwind CSSでいい感じに余白を指定するには、marginとpaddingだけでなく、その他のプロパティの指定値についても知っておく必要がある。

以下に使用頻度の高そうなプロパティをピックアップする。

なお、プロパティ-[数値px]やプロパティ-[数値%]の形で任意の値を指定できるのは、サイズを指定するタイプのクラスで共通なので記載を省略する。

width/height

widthやheightは、それぞれw-*、h-*という形で指定する。単位は、主にrem、分数（%）を用いる。

まずremは、marginやpaddingと同じである。ので省略する。

分数は、以下のような形で指定する。

Tailwind CSS CSS
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-full width: 100%;

同形なので省略するが、3のほか、2,4,5,6,12を分母にできる（ただし、heightの場合は6まで。12は指定できない）。

また、このほか以下のような値も指定できる。

Tailwind CSS CSS
w-0 width: 0px;
w-px width: 1px;
w-auto width: auto;
w-screen width: 100vw;
w-svw width: 100svw;
w-lvw width: 100lvw;
w-dvw width: 100dvw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;

heightは、wをh、vwをvhにすること以外は同じなので省略する。

参考：Width – Tailwind CSS Width

border-width

border-widthは、border-対象の線-サイズという形で指定する。単位はremではなく、pxである。

ただし任意の値を指定できるわけではなく、以下に制限される。

Tailwind CSS CSS
border border-width: 1px;
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;

上記は四方の線の太さを指定する場合の例である。対象の線を絞りたい場合は、marginやpaddingと同じ略字を使ってborder-と-値の間を繋ぐ。

参考:Border Width – Tailwind CSS Border Width

line-height

line-heightは、leaading-サイズという形で指定する。単位は、remあるいはTailwind CSS独自のサイズ名である。

remを使うのはmargin、paddingなどと同じだが、範囲が違うので注意したい。

Tailwind CSS CSS
leading-3 line-height: 0.75rem;/* 12px */
leading-4 line-height: 1rem;/* 16px */
leading-5 line-height: 1.25rem;/* 20px */
leading-6 line-height: 1.5rem;/* 24px */
leading-7 line-height: 1.75rem;/* 28px */
leading-8 line-height: 2rem;/* 32px */
leading-9 line-height: 2.25rem;/* 36px */
leading-10 line-height: 2.5rem;/* 40px*/

また、以下のような独自のサイズ名（noneを除くs）で値を指定することもできる。

Tailwind CSS CSS
leading-none line-height: 1;
leading-tight line-height: 1.25;
leading-snug line-height: 1.375;
leading-normal line-height: 1.5;
leading-relaxed line-height: 1.625;
leading-loose line-height: 2;

参考：Line Height – Tailwind CSS Line Height

font-size

font-sizeは、text-サイズという形で指定する。単位には、Tailwind CSS独自のサイズ名を使う。

Tailwind CSS CSS
text-xs font-size: 0.75rem;line-height: 1rem;
text-sm font-size: 0.875rem;line-height: 1.25rem;
text-base font-size: 1rem;line-height: 1.5rem;
text-lg font-size: 1.125rem;line-height: 1.75rem;
text-xl font-size: 1.25rem;line-height: 1.75rem;
text-2xl font-size: 1.5rem;line-height: 2rem;
text-3xl font-size: 1.875rem;line-height: 2.25rem;
text-4xl font-size: 2.25rem;line-height: 2.5rem;
text-5xl font-size: 3rem;line-height: 1;
text-6xl font-size: 3.75rem;line-height: 1;
text-7xl font-size: 4.5rem;line-height: 1;
text-8xl font-size: 6rem;line-height: 1;
text-9xl font-size: 8rem;line-height: 1;

参考：Font Size – Tailwind CSS Font Size

text-サイズには、line-heightの指定も含まれている。leading-*を併用するとそちらが優先される。

html
<template>
  <!-- Tailwind CSSのコード -->
  <div class="flex items-start">
    <div class="text-2xl bg-yellow-400">text-xlだけ</div>
    <div class="text-2xl bg-yellow-200 leading-3">text-xlとleading-3</div>
  </div>
 <!-- ここまで -->

  <script src="https://cdn.tailwindcss.com"></script>
</template>
<div style="overflow:auto;width:100%;">
  <iframe width="500" height="100"></iframe>
</div>
<script>
  const iframe = document.querySelector("iframe");
  iframe.srcdoc = document.querySelector("template").innerHTML;
</script>

box-sizing

box-sizingは、以下のような形で指定する。

Tailwind CSS CSS
box-border box-sizing: border-box;
box-content box-sizing: content-box;

なお、border-boxは、margin、border、paddingをwidthやheightに含める。

border-contentは、margin、border、paddingをwidthやheightに含めない、というプロパティである。

参考：Box Sizing – Tailwind CSS Box Sizing

参考資料