【tailwindへの移行】詳細度の問題発生から解決までメモ

前置き

• 元々stylusで書かれていたプロジェクトにtailwind.cssを導入する
• 既にプロジェクトにsanitize.cssを入れており、sanitizeを入れているとtailwindのスタイルが効かない等の問題発生
• sanitizeをプロジェクトから外してtailwindを効かせるようにするも、sanitizeのスタイルが効いていた箇所が多々あり、stylusの共通ファイル(common.styl)にsanitizeのスタイルを書いて効かせるように対応

課題

• stylusのスタイルの詳細度がtailwindのスタイルより高くなるため、スタイルが崩れてしまう

詳細度とは

ブラウザがスタイルを適用するときに決定する手段のこと。CSSセレクタごとに反映される優先順位が異なる。

セレクタの種類

1. 要素型セレクタ(h1など)と:疑似要素(:beforeなど)
2. クラスセレクタ、属性セレクタ、擬似クラス
3. IDセレクタ(#exampleなど)

インラインスタイル(<p style="font-weight='bold'">...</p>みたいな)は常に外部cssファイルのスタイルを上書きするので最も高い詳細度を持っている。

技術的には詳細度と無関係だが、!importantが宣言されたとき、他のスタイル宣言は上書きされる。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

課題への対応

tailwind.cssファイルのベーススタイル(preflight)にstylusの共通ファイル(common.styl)の内容を移す

preflight

preflightはmodern-normalizeを基盤として構築されたベーススタイルのセットのこと。ブラウザ間の不整合を円滑にし、デザインシステムの制約内での作業をしやすくしてくれるらしい。

preflightによって適用されるスタイル
preflight.css

対応に当たって発生した障害

preflightを拡張して以下を追加したところ、preflight.cssが:where()を打ち消してしまう

https://github.com/csstools/sanitize.css/blob/main/forms.css

疑似要素:where()について

疑似要素:where()は自分自身の詳細度が常にゼロで置き換えられる

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

対応

:where()を外して、preflight.cssに打ち消されないように対応