TailwindCSSへの漸進的な移行中に既存クラスへoverrideして意図しないスタイルが当たる場合がある
状況
Tailwind CSSの導入において漸進的・段階的に移行を計画するシーン
段階的な以降に際してファイル・パスマッチで局所的に TailwindCSS の該当クラスを引き込みたい
code:tailwind.config.js
module.exports = {
// いろいろ設定があって Config.content の箇所でファイル・パスを絞り込む
content: "./src/partial/path/to/**/*.{ts,html}",
}
この場合ほかの ts,html では TailwindCSS は使用しておらず、開発者が任意のクラスを命名しそのままスタイルを適用する形をとる（ランダムテキストでユニークなクラス名になるものではない、素朴な命名スタイル）
content に指定したファイル名からTwクラスらしき文字列を抽出して style.css のようなファイルにまとめる
問題
例えば TailwindCSS を適用しないページで class="container" を使っている
code:css
/* 開発者が適用したいスタイル */
.container { display: flex; }
Tailwind にも当該のクラスがあるが、この事実単体ではあまり問題にはならない
Container - Tailwind CSS
単体では問題にならないが、content: ["./src/partial/path/to/**/*.{ts,html}"] の指定されたファイル内に container という文字列がある場合、TailwindCSS の Container スタイルが引き込まれる
code:css
.container {
/* 開発者が適用したいスタイル */
display: flex;
}
/* style.css には TailwindCSS が呼び込むスタイル */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
意図せず余計なスタイルが適用される
なんと抽出は文字列なので変数でさえも呼び込む対象の文字列となりうる
code:foo.ts
const container = FooObj;
解決策
content: ["./src/partial/path/to/**/*.{ts,html}"], を適切に絞り込めないかを検討
Config で blocklist などを検討
Content Configuration - Tailwind CSS
感想
TailwindCSS は独特なユーティリティクラスの命名なのでかぶることはないが、container あたりはかぶりえる（ガブリエル