TailwindCSSについて自分なりのチートシートを作る。#6 BOX編

初めに

TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。

第一弾目は、疑似クラスについてまとめました。
第二弾目は、レスポンシブデザインについてまとめました。
第三弾目は、ダークモードの実装についてまとめました。
第四弾目は、コンテナについてまとめました。
第五弾目は、Columnsについてまとめました。

第六弾目は、ボックスについてまとめていきたいと思います。

基本的なBoxレイアウトに関するクラス一覧

1. サイズ(Width / Height)

クラス	説明
w-64	幅を固定（例：16rem）
w-full	横幅いっぱい
h-32	高さを固定（例：8rem）
h-screen	画面全体の高さ

2. パディング・マージン

クラス	説明
p-4 / px-4 / py-4	内側の余白（全体 / 横 / 縦）
m-4 / mx-4 / my-4	外側の余白（全体 / 横 / 縦）

3. ボーダー

クラス	説明
border	デフォルトの1pxボーダー
border-2 / border-4	ボーダーの太さ
border-gray-300	ボーダーの色
rounded / rounded-lg / rounded-full	角の丸み

4. シャドウ

クラス	説明
shadow	標準的な影
shadow-md / shadow-lg	より強い影
shadow-none	影なし

5. 背景・色

クラス	説明
bg-white / bg-gray-100	背景色
bg-blue-500	ブルーの背景
text-gray-700	テキストの色
bg-opacity-50	背景の透明度

6. 表示・配置

クラス	説明
flex / grid	ボックス内のレイアウト指定
items-center / justify-center	中央寄せ（Flex用）
text-center	テキスト中央寄せ

7. その他便利なクラス

クラス	説明
overflow-hidden	はみ出た部分を隠す
z-10	Zインデックス
cursor-pointer	ポインター表示に

8.Box Decoration Break

• 概要
  box-decoration-break は、改行や複数行にまたがる要素に対して、背景やボーダーがどのように表示されるか を制御します。

クラス名	説明
box-decoration-slice	デフォルト。要素が複数行に分割されても、背景やボーダーは1つのまとまりとして表示される(連続的に見える)。
box-decoration-clone	各行に対して個別に背景やボーダーが適用され、各行ごとに装飾が複製されて表示される(行ごとに独立しているように見える)。

具体例その1

1.サイズ(Width / Height)～7.その他便利なクラスまでをいくつか使用した例を以下に示します。

<div class="m-4 w-80 rounded-lg border border-gray-300 bg-white p-6 text-gray-700 shadow-md">
  <div class="mb-4 flex items-center">
    <h2 class="text-xl font-semibold">ユーザー名</h2>
  </div>
  <p class="text-sm">テキスト、テキスト、テキスト。</p>
  <button class="mt-4 cursor-pointer rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">詳細を見る</button>
</div>

実行結果

具体例その2

box-decoration-sliceとbox-decoration-cloneの違いが分かるような具体例を以下に示します。

box-decoration-sliceの例

  <!-- box-decoration-slice: 背景がつながって見える -->
  <span class="bg-gradient-to-r from-green-400 to-blue-500  box-decoration-slice px-2 text-white">
    背景が<br />つながって見える
  </span>

実行結果

box-decoration-cloneの例

  <!-- decoration-clone: 各行ごとに独立 -->
  <span class="bg-gradient-to-r from-green-400 to-blue-500 box-decoration-clone px-2 text-white">
    背景が<br />行ごとに分かれる
  </span>