こんにちは。特にLPのコーディング時に多いのですが、「だいたい見た目は一緒だけど一部だけ違う」要素って時々ありますよね。こういう時に通常のCSSに加えてTailwind CSSでその差分を指定する使い方をよくします。
<head>
<link rel="stylesheet" href="./resources/styles/style.css" />
<link rel="stylesheet" href="./resources/styles/utility.css" />
</head>
<body>
<div class="Box"></div>
<div class="Box mt-4"></div>
</body>こういう使い方をすると、「クラスを書いたのにTailwindが効かない」「読み込み順を変えても直らない」ということがよく起きます。原因の9割は Cascade Layer（カスケードレイヤー）による優先度の設定です。
この記事ではTailwindと通常のCSSを組み合わせて使うときの正しい指定方法を解説します。
正しく設定ができていて、意図通りにプロパティが生成されていることを前提とします。Tailwind CSSの使い方を確認したい場合はこちらをご覧ください。
結論
- 必ず自作CSS→Tailwind CSSに順でファイルを読み込む
<head>
<link rel="stylesheet" href="./resources/styles/style.css" /> <!-- 自作 -->
<link rel="stylesheet" href="./resources/styles/utility.css" /> <!-- Tailwind -->
</head>- 無名でも構わないので自作CSSの内容を@layerルールでレイヤー化する←本記事で解説
/* 自作CSS */
@layer main {
body {
/* 省略 */
}
.Container {
/* 省略 */
}
.
.
.
}これで問題なくTailwindで生成したプロパティが適用されるようになります。
Cascade Layerとは
CSSは基本的に後に書いた方が勝ちます。同じ要素に複数の場所からプロパティを指定された時、どれを優先して適用するかを定義するアルゴリズムのことをカスケード（Cascade）と呼びます。ちなみにCSSはCascading Style Sheetの略です。
このルールに、CSS Level 5 で追加された カスケードレイヤーシステムにより“レイヤー順” という新しい優先度が挟まるようになりました。
次のように、@layerルールを用いて記述します。
@layer main {
.Sample {
margin-top: 32px;
}
}
@layer utility {
.mt-4 {
margin-top: 16px;
}
}レイヤー内は従来通りの優先度で判断され、レイヤー同士は後から書いたほうが優先される形になります。
またレイヤー順を明示することも可能です。後ろに書かれたものほど優先されます。
@layer utility mainもしこのように書けば、ファイル上の順番はmain→utilityでもmainが優先されるようになります。
さて、レイヤー同士の優先度はシンプルで非常にわかりやすいですね。問題はレイヤーが指定されていないCSSです。unlayered styleとも呼ばれますが、なんとこれは常にレイヤー指定されているCSSより優先度が高くなってしまうのです。
上の例だと、
- レイヤーが指定されていないCSS
- main
- utility
となってしまい、レイヤー付きの順番をどう変えようがレイヤーのないCSSに負けてしまいます。
Tailwindが自動で生成する4つのレイヤー
Tailwindはビルド時に次の4つのレイヤーを自動で出力します。
| レイヤー名 | 内容 | 生成例 |
|---|---|---|
| theme | カスタムプロパティ系 | --color-red-500: oklch(...); |
base | リセットCSS（preflight） | html { font-family: ... } |
components | .btn, .card など再利用パーツ | .btn { @apply ... } |
utilities | .p-4, .text-center などのユーティリティ | .p-4 { padding: 1rem } |
TailwindによるCSSは全てなんらかのレイヤーに含まれるため、通常CSSに負けるという落とし穴があります。だから効かなかったんですね。
解決策
というわけで、レイヤー指定されていないCSSが何かと扱いにくいのでまずは自作CSSにレイヤーを指定しましょう。無名レイヤーでも構いません。
@layer main {
// ここに自作CSS
}
// もしくは無名でもいい
@layer {
// ここに自作CSS
}この上で自作CSS→Tailwindの順番でファイルを読み込んでください。
<link rel="stylesheet" href="./resources/styles/style.css" />
<link rel="stylesheet" href="./resources/styles/utility.css" />これでOKです。
まとめ
ということでTailwind CSSが効かない原因を解説しました。ほとんどカスケードレイヤーの解説になりましたが、仕組みを理解して適切に使えるようになりましょう。
コメント