Zenn
🍃

[Tailwind CSS] 私なりのチートシート

2024/11/18に公開
CSS
Tailwind CSS
初心者向け
tech

はじめに

この記事では、基本的な Tailwind CSSを解説します。
※ 随時更新予定です。

参考資料

0. 前提条件

  1. 下記サイトを活用して表示しております。

  2. 見やすいようにfont-sizeを200%にしております。

html {
  font-size: 200%;
}
  1. 見やすいように下記divで囲っております。
<div class="flex flex-col justify-center min-h-screen mx-10">
  <!-- 対象のhtmlを記載 -->
</div>
  1. 見やすいように背景色(bg-cyan-X00) を設定している場合があります。

1. 背景

1. 背景色を設定する

<p class="">backgroundColor未設定</p>
<p class="bg-cyan-500">backgroundColorをrgb(6, 182, 212)に設定</p>

bk

2. 背景色を不透明度を設定する

<p class="bg-cyan-500">backgroundColorをrgb(6, 182, 212)に設定</p>
<p class="bg-cyan-500/50">backgroundColorをrgb(6, 182, 212, 0.5)に設定</p>
<p class="bg-cyan-500/30">backgroundColorをrgb(6, 182, 212, 0.3)に設定</p>

bk-opacity

2.文字

1. 文字色を設定する

<p class="">textColor未設定</p>
<p class="text-red-500">textColorをrgb(239, 68, 68)に設定</p>

text-color

2. 文字色を不透明度を設定する

<p class="text-red-500">textColorをrgb(239, 68, 68)に設定</p>
<p class="text-red-500/50">textColorをrgb(239, 68, 68, 0.5)に設定</p>
<p class="text-red-500/30">textColorをrgb(239, 68, 68, 0.3)に設定</p>

text-color-opacity

3. 文字サイズを設定する

<p class="bg-cyan-100 text-xs">font-size: 0.75rem; line-height: 1rem;</p>
<p class="bg-cyan-200 text-base">font-size: 1rem; line-height: 1.5rem;</p>
<p class="bg-cyan-300 text-lg">
  font-size: 1.125rem; line-height: 1.75rem;
</p>
<p class="bg-cyan-400 text-xl">font-size: 1.25rem; line-height: 1.75rem;</p>
<p class="bg-cyan-500 text-2xl">font-size: 1.5rem; line-height: 2rem;</p>

text-size

4. 文字の高さを設定する

<p class="bg-cyan-100 leading-3">line-height: .75rem</p>
<p class="bg-cyan-200 leading-4">line-height: 1rem</p>
<p class="bg-cyan-300 leading-5">line-height: 1.25rem</p>
<p class="bg-cyan-400 leading-6">line-height: 1.5rem</p>
<p class="bg-cyan-500 leading-7">line-height: 1.75rem</p>
<p class="bg-cyan-600 leading-8">line-height: 2rem</p>

text-leading

5. 文字の太さを設定する

<p class="font-thin">font-weight: 100</p>
<p class="font-light">font-weight: 300</p>
<p class="font-normal">font-weight: 400</p>
<p class="font-blod">font-weight: 700</p>
<p class="font-black">font-weight: 900</p>

font-weight

6. 文字の配置(左右)を設定する

<p class="text-left">text-align: left</p>
<p class="text-center">text-align: center</p>
<p class="text-right">text-align: right</p>
<p class="text-justify">text-align: justify</p>
<p class="text-start">text-align: start</p>
<p class="text-end">text-align: end</p>

text-align

[Q] text-align: left or justify or start の違いとは？
プロパティ 揃え方 書字方向依存 用途
text-align: left 左揃え 依存しない 主に左から右書字方向の言語向け
text-align: justify TD 依存しない 美観が求められる文章配置向け
text-align: start 書字方向の開始側揃え 依存する 国際化対応、動的言語切替に適している

7. 数値表示設定

<p class="tabular-nums">1234567890</p>
<p class="tabular-nums">0909090909</p>

tabular-nums

8. 省略と改行を設定する

<div class="mb-3">
  <p class="font-black">1行目まで表示</p>
  <p class="line-clamp-1 pl-3">
    ああああああああああああああああああああああああああああああああああああああああ
  </p>
</div>
<div class="mb-3">
  <p class="font-black">2行目まで表示</p>
  <p class="line-clamp-2 pl-3">
    あああああああああああああああああああああああああああああああああああああああ
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  </p>
</div>

line-clamp

3. margin/pading

1. 四方にスペーシングを設定する

<div class="bg-cyan-200 m-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 p-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p

2. 上側にスペーシングを設定する

<div class="bg-cyan-200 mt-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 pt-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-t

3. 右側にスペーシングを設定する

<div class="bg-cyan-200 mr-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 pr-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-r

4. 下側にスペーシングを設定する

<div class="bg-cyan-200 mb-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 pb-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-b

5. 左側にスペーシングを設定する

<div class="bg-cyan-200 ml-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 pl-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-l

6. 左右側にスペーシングを設定する

<div class="bg-cyan-200 mx-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 px-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-x

7. 上下側にスペーシングを設定する

<div class="bg-cyan-200 my-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 py-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

m-p-y

8. 内側にスペーシングを設定する

<div class="bg-cyan-200 -m-6">
  <div class="h-20 w-20">margin: 24px</div>
</div>
<div class="bg-rose-200 -p-6">
  <div class="h-20 w-20">pading: 24px</div>
</div>

-m-p

9. 左右側にスペーシングを間隔で設定する

<div class="flex mx-10 bg-gray-50 space-x-4">
  <div class="h-20 w-20 bg-cyan-200">1</div>
  <div class="h-20 w-20 bg-cyan-200">2</div>
  <div class="h-20 w-20 bg-cyan-200">3</div>
</div>

space-x

10. 上下側にスペーシングを間隔で設定する

<div class="flex flex-col justify-center items-start min-h-screen mx-10 bg-gray-50 space-y-4">
<div class="h-20 w-20 bg-cyan-200">1</div>
<div class="h-20 w-20 bg-cyan-200">2</div>
<div class="h-20 w-20 bg-cyan-200">3</div>
</div>

space-y

4. ボーダー

1. 境界線を設定する

<div class="h-20 w-20 bg-cyan-200">境界線なし</div>
<div class="h-20 w-20 bg-rose-200 border border-indigo-500">境界線あり<br>1px solid</div>

border

2. 境界線の太く設定する

<div class="h-20 w-20 bg-cyan-200 border-indigo-500 border">1px</div>
<div class="h-20 w-20 bg-rose-200 border-indigo-500 border-4">4px</div>

border-weight

3. 境界線の位置を設定する

<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-t-4">上</div>
<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-r-4">右</div>
<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-b-4">下</div>
<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-l-4">左</div>
<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-x-4">左右</div>
<div class="h-10 w-10 bg-cyan-200 border-indigo-500 border-y-4">上下</div>

border-position

4. 境界線のスタイルを設定する

<div class="h-10 w-20 bg-cyan-200 border-indigo-500 border-4 border-dashed">点線</div>
<div class="h-10 w-20 bg-cyan-200 border-indigo-500 border-4 border-dotted">ドット</div>
<div class="h-10 w-20 bg-cyan-200 border-indigo-500 border-4 border-double">二重線</div>
<div class="h-10 w-20 bg-cyan-200 border-indigo-500 border-4 border-hidden">非表示</div>

border-style

5. 横幅を設定する

1. 横幅を割合で設定する

<div class="flex mt-2 mx-10 bg-gray-50">
  <div class="h-20 bg-cyan-200 w-2/5">40%</div>
  <div class="h-20 bg-rose-200 w-3/5">60%</div>
</div>

w-percent

2. w-fullとw-auto横幅をで設定する

<div class="flex mt-2 mx-10 bg-gray-50">
  <div class="h-20 bg-cyan-200 w-full">w-full: 親要素いっぱいに広がる</div>
  <div class="h-20 bg-rose-200 w-auto">w-auto: 内容やコンテンツのサイズに応じて広がる</div>
</div>

w-auto-fill

6. 縦幅を設定する

1. 縦幅を割合で設定する

<div class="flex mt-2 mx-10 bg-gray-50">
  <div class="h-20 bg-cyan-200 w-2/5">40%</div>
  <div class="h-20 bg-rose-200 w-3/5">60%</div>
</div>

w-percent

2. w-fullとw-auto縦幅をで設定する

<div class="flex mt-2 mx-10 bg-gray-50">
  <div class="h-20 bg-cyan-200 w-full">w-full: 親要素いっぱいに広がる</div>
  <div class="h-20 bg-rose-200 w-auto">w-auto: 内容やコンテンツのサイズに応じて広がる</div>
</div>

w-auto-fill

3. 縦幅の最大幅で設定する

各横幅に対応するスマホ・デバイス例
Tailwindクラス 最大幅(px) 主なデバイス例
max-w-xs 320px iPhone SE (第1世代)、iPhone 5/5S、Pixel 4a
max-w-sm 384px 一部の小型Androidスマートフォン、iPhone SE (第2世代)
max-w-md 448px 中小型スマートフォンの中間サイズ
max-w-lg 512px 一部の大型スマートフォン、Pixel 6
max-w-xl 576px iPhone 12/13 Mini、Pixel 5、Galaxy S8
max-w-2xl 672px iPhone 11/12/13/14 Pro、Galaxy S10、Pixel 6 Pro
max-w-3xl 768px 一部の折りたたみスマートフォン (Galaxy Z Fold 閉じた状態)
max-w-4xl 896px タブレット (iPad Mini 横向き)、折りたたみスマートフォンの展開時
max-w-5xl 1024px タブレット (iPad 横向き)、iPad Air/Pro 11インチ横向き
max-w-6xl 1152px 大型タブレット (iPad Pro 12.9インチ 横向き)
max-w-7xl 1280px 小型ノートPC (MacBook Air/Pro 13インチのブラウザ幅) 
<div class="p-4">
  <div class="bg-sky-300 max-w-xs">320px</div>
  <div class="bg-sky-300 max-w-sm">384px</div>
  <div class="bg-sky-300 max-w-md">448px</div>
  <div class="bg-sky-300 max-w-lg">512px</div>
  <div class="bg-sky-300 max-w-xl">576px</div>
  <div class="bg-sky-300 max-w-2xl">672px</div>
  <div class="bg-sky-300 max-w-3xl">768px</div>
  <div class="bg-sky-300 max-w-4xl">896px</div>
  <div class="bg-sky-300 max-w-5xl">1024px</div>
  <div class="bg-sky-300 max-w-6xl">1152px</div>
  <div class="bg-sky-300 max-w-7xl">1280px</div>
</div>

max-w

7. 角を設定する

1. 縦幅を割合で設定する

<div class="w-20 bg-cyan-100 rounded">4px</div>
<div class="w-20 bg-cyan-200 rounded-md">6px</div>
<div class="w-20 bg-cyan-300 rounded-lg">8px</div>
<div class="w-20 bg-cyan-400 rounded-2xl">12px</div>

rounded

GitHubで編集を提案

Discussion