📦

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-slicebox-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>

Discussion