TailwindCSS

Published at 2026/03/28

TailwindCSS

[&_h1+p, &_h2+p]のカンマ後スペースはパーサーが区切りとして誤認識する。
スペースが入らないようにする。

/* ❌ カンマの後にスペースがある → エラー */
@apply [&_h1+p, &_h2+p, ...]:mt-1.5;
@apply [&>p, &_li]:text-base;
@apply [&_ul, &_ol]:mt-2;

/* ✅ スペースなし */
@apply [&_h1+p,&_h2+p,&_h3+p,&_h4+p,&_h5+p,&_h6+p]:mt-1.5;
@apply [&>p,&_li]:text-base [&>p,&_li]:md:text-lg [&>p]:text-gray-950;
@apply [&_ul,&_ol]:mt-2 [&_ul]:list-disc [&_ul,&_ol]:list-outside [&_ul,&_ol]:ml-4.5;

VSCodeのフォーマッタが勝手にスペースを入れる場合、設定を以下に変更しておくとよい。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "[css]": {
    "editor.formatOnSave": false
  }
}

& : 親要素、ここでは .prose に置き換わる
:where(…) : 詳細度のリセット
- li > ol →　詳細度 2 になる
- where(li > ol) → 詳細度 0 になる
- あとから上書きしやすい
: 子結合子
- 左側の要素の直下にある右側の要素
- li > ol は li の直下にあるol
- li ol だと li の下のすべての階層のolに適用される

入れ子になったリストのmarginをリセットする場合

.prose {
  & :where(li > ol, li > ul, ol > ol, ul > ul) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

em と rem

rem (root em)
- 基準: HTML要素（ルート）のフォントサイズ
- 特徴: どこで使っても 1rem は同じ大きさ
em
- 基準: その要素自身のフォントサイズ（または親要素）
- 意味: その場所で設定されているフォントサイズを 1em とする
- 特徴: 「入れ子」にすると、サイズが掛け算で膨らんでいく
要素が幅を超える長さの時の挙動
- overflow-x: auto;
  - 意味: 中身が横にはみ出た時だけ、スクロールバーを出す
  - auto の挙動: 中身が枠内に収まっている時：何も起きない
  - 中身が枠より広い時: 横スクロールバーが出現し、枠の中で中身を左右に動かせる
行間の設定
- line-height: 1.5;
- 意味：行間（行の高さ）を文字サイズの1.5倍にする
- 単位はあえて書かないのがベストプラクティス
  - 単位あり(em や %) だと親要素を元に計算される
  - 単位なしだと自分のフォントサイズを元に計算する
antialiased
- 意味: 文字の「ギザギザ」を抑えて、少し細く、滑らかに表示します。
flex flex-col
- flex: 子要素は「横」に並ぼうとします。
- flex-col: 並ぶ向きを「縦（column）」に変更します。
- 役割: ヘッダー、メインコンテンツ、フッターを縦にきれいに積み上げることができます。
min-h-screen (画面の高さに合わせる)
- 意味: 要素の最小の高さを「画面いっぱい（100vh）」にします。
- なぜ使う？: これがないと、中身のテキストが少ない時に背景色が途中で切れてしまい、画面の下半分が真っ白（または真っ黒）になってしまいます。これを入れることで、中身が空っぽでもフッターを画面の一番下まで押し出す準備が整います。

TailwindCSS

TailwindCSS

Links