Open4
【tailwindへの移行】詳細度の問題発生から解決までメモ
がく前置き
- 元々stylusで書かれていたプロジェクトにtailwind.cssを導入する
- 既にプロジェクトにsanitize.cssを入れており、sanitizeを入れているとtailwindのスタイルが効かない等の問題発生
- sanitizeをプロジェクトから外してtailwindを効かせるようにするも、sanitizeのスタイルが効いていた箇所が多々あり、stylusの共通ファイル(common.styl)にsanitizeのスタイルを書いて効かせるように対応
課題
- stylusのスタイルの詳細度がtailwindのスタイルより高くなるため、スタイルが崩れてしまう
がく詳細度とは
ブラウザがスタイルを適用するときに決定する手段のこと。CSSセレクタごとに反映される優先順位が異なる。
セレクタの種類
- 要素型セレクタ(h1など)と:疑似要素(:beforeなど)
- クラスセレクタ、属性セレクタ、擬似クラス
- IDセレクタ(#exampleなど)
インラインスタイル(<p style="font-weight='bold'">...</p>みたいな)は常に外部cssファイルのスタイルを上書きするので最も高い詳細度を持っている。
技術的には詳細度と無関係だが、!importantが宣言されたとき、他のスタイル宣言は上書きされる。
がく課題への対応
tailwind.cssファイルのベーススタイル(preflight)にstylusの共通ファイル(common.styl)の内容を移す
preflight
preflightはmodern-normalizeを基盤として構築されたベーススタイルのセットのこと。ブラウザ間の不整合を円滑にし、デザインシステムの制約内での作業をしやすくしてくれるらしい。
preflightによって適用されるスタイル
preflight.css
がく対応に当たって発生した障害
preflightを拡張して以下を追加したところ、preflight.cssが:where()を打ち消してしまう
疑似要素:where()について
疑似要素:where()は自分自身の詳細度が常にゼロで置き換えられる
対応
:where()を外して、preflight.cssに打ち消されないように対応