こんにちは。 Tailwind CSSにはデフォルトでリセットCSSが組み込まれています。Preflightと呼ばれるもので、modern-normalizeをベースに制作されているようです。
ですが、他のリセットCSSを使ってるなど場合によってはこのPreflightが邪魔な時もありますよね。出力させない方法を紹介します。
結論
input側のCSSの初期設定を、@import “tailwindcss”; から以下に変更するだけです。
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);他のリセットCSSを使う場合は@layerで囲った上でリセットCSS→Tailwindの順で読み込むようにしてください。
@layer reset {
// ここにリセットの内容
}<link rel="stylesheet" href="./resources/styles/style.css" />
<link rel="stylesheet" href="./resources/styles/utility.css" />CSSファイルの初期設定を変更する
Tailwind CSS v4での初期設定は以下です。
@import "tailwindcss";これは内部的には以下のコードを指定したのと同じ意味になります。
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);これはカスケードレイヤーを利用しています。詳しくはこちらの記事に解説を譲りますが、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 } |
そしてこれをtheme→base→components→utilitiesの順で優先するようにしています。utilitiesが最優先です。
さて、baseレイヤーにはpreflight.cssが割り当てられていますね。コードをもう一度見てみましょう。4行目です。
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base); // これ
@import "tailwindcss/utilities.css" layer(utilities);これを削除すればpreflight.cssは出力されません。
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);仕組みを知れば簡単ですね。
注意：他のリセットCSSと組み合わせる場合
Preflightが邪魔なケースは要するに他のリセットを使っているからが多いと思いますが、注意点があります。
それはTailwindが出力するCSSは全てレイヤーに属するということです。結果だけ言えば、普通にリセットCSS→Tailwindの順で読み込んだだけではTailwindが効かない場合が出てきます。
<link rel="stylesheet" href="./resources/styles/reset.css" />
<link rel="stylesheet" href="./resources/styles/utility.css" />こうした時に、reset.cssが記述しているプロパティはTailwindから上書きできません。
// reset.cssの例
h1 {
margin: 0;
}<h1 class="mt-4">見出し1</h1> <!-- このmt-4が効かない -->これはレイヤー付きCSSよりレイヤー無しCSSの方が読み込み順に関わらず優先されてしまうからです。したがってreset.css側をレイヤー付きにしておいてください。
@layer reset {
// ここにリセットの内容
}▼ 詳しく理解するにはこちら
まとめ
ということでTailwind CSSのリセットCSS部分を読み込ませない方法でした。覚えて仕舞えば簡単ですが知らないと苦労します。特に設定方法が3系とだいぶ違っていますので気をつけてください。
▼ Tailwind CSS v4の基本を覚えたい方はこちら
コメント