こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、Tailwind CSSに標準搭載されているリセットCSSを無効にする方法をご紹介します。
実現したいこと
冒頭、実現したいことを整理します。
Tailwind CSSではリセットCSSとして、Preflightが標準搭載されています。
Preflightは@import "tailwindcss";に含まれ、baseレイヤーに組み込まれるようになっています。
なお、Tailwind CSSのクラスは@layerを用いて順位付けされており、
themeレイヤーbaseレイヤーcomponentsレイヤーutilitiesレイヤー
の順で上書きされていきます。（p-*などのユーティリティクラスが最優先となる）
Preflightはブラウザ依存の振る舞いを取り除いて、ブラウザ間の表現の不一致を防ぐ役割を担います。
一方で、すでにプロジェクト内でリセットCSSを採用している場合に、Preflightによって意図しない描写を招くことがあります。
今回実現したいのは、Tailwind CSSに標準搭載されているリセットCSS（Preflight）を無効にして、独自のリセットCSSに置き換えることです。
Preflightを無効にする方法
結論から申し上げると、Tailwind CSSのインポートを書き換えることでPreflightを無効にできます。
Tailwind CSSを使用する場合、設定ファイルのCSSで @import "tailwindcss";を宣言します。
@import "tailwindcss";には以下のようなCSSが含まれています。
@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(base); // これがPreflight @import "tailwindcss/utilities.css" layer(utilities);
@import "tailwindcss/preflight.css" layer(base);が読み込まれないようにするには、@import "tailwindcss";を用いずに次のように各種import宣言を直に記述します。
@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities);
これで、Tailwind CSSのセットからPreflightのみを取り除けます。
独自のリセットCSSを設定する
独自のリセットCSS、すなわちタグに対するデフォルトのスタイルを設定したい場合は、baseレイヤー内に記述します。
例えば、「h1タグの文字色は赤色」というデフォルトスタイルを設定する場合は、以下のようにします。
@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @layer base { h1 { color: red; } }
これで、h1タグの文字色は赤色になります。
<!--- デフォルトで文字色は赤色になる ---> <h1>見出し</h1>
冒頭に申し上げた通り、baseレイヤーの優先順位は低いため、ユーティリティクラスを付与すると上書きされます。
<!--- ユーティリティクラスが最優先になるため、文字色は黒色になる ---> <h1 class="text-black">見出し</h1>
まとめ
今回は、Tailwind CSSに標準搭載されているリセットCSS（Preflight）を無効にする方法をご紹介しました。
既存のプロジェクトにTailwind CSSを乗せる場合に、リセットCSSは据え置きにしたいモチベーションが生まれることがあるかと思います。
ただし、Tailwind CSSのユーティリティクラスはPreflightをベースに設計されていますので、その点は注意が必要です。
まっさらなプロジェクトを筆頭に、基本的にはPreflightをそのまま使用することをおすすめします。
Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。
