Tailwind CSSのPreflightとは？

Tailwind CSSのレイヤ
Preflightとは？
Preflightを拡張する方法
Preflightを無効化する方法
参考

Tailwind CSSのレイヤ

Tailwind CSSのレイヤは3種類で、これらはITCSSのコンセプトによる。

base…まっさらなHTMLに適用するリセット用、もしくはデフォルトのスタイル
component…クラスベースなスタイルで、utilitiesレイヤで上書きすることもできる。3rdパーティコンポーネントのスタイルなどを定義する場として最適
utilities…Tailwind CSSで最も使用するユーティリティと呼ばれるクラス

Preflightとは？

PreflightとはTailwind CSSプロジェクトのベーススタイルで、ブラウザ間の差異を均し、スタイル割り当てを簡単にする。baseレイヤでInjectされ、以下のようなことを行う。

いろいろな要素(h1, h2, h3, …p, …)のデフォルトマージンを削除
ヘッダ系要素(h1, h2, h3, …etc)のスタイル解除
リスト系要素(li/ul)のスタイル解除
画像系要素(img, svg, video, canvas, …etc)をブロックとする
画像と動画要素(img, video)を親コンテナに制約する
すべての要素のボーダスタイルをリセット

Preflightを拡張する方法

@layerと@applyディレクティブを使用して、baseレイヤに新たなスタイルを追加することができる。

/* CSSにbaseレイヤを挿入 */
@tailwind base

/* @layerでカスタムスタイルの所属先を指定 */
@layer base {
  /* @applyを使用して既存のユーティリティクラス(text-2xl/xl/lg)を割り当てる */
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  ...
}

/* CSSにcomponentsレイヤを挿入 */
@tailwind components;

/* CSSにutilitiesレイヤを挿入 */
@tailwind utilities;

Preflightを無効化する方法

以下のようなケースでは、Preflightを無効化したくなるかもしれない。

既存プロジェクトにTailwindを統合する場合
ベーススタイルを提供したい場合など、

こういう時は、設定ファイルを次のようにすれば無効化できる。

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  }
}

実際にビルドしてCSSを出力すると、結果にPreflight分が適用されていないことがわかる。

npx tailwindcss -i ./src/input.css -o ./src/output.css

参考

ITCSS: Scalable and Maintainable CSS Architecture - Xfive

ITCSS is an answer to the question: How do I make my CSS scalable and maintainable? It’s a concern for every front-end d...

Adding custom styles - Core concepts

Best practices for adding your own custom styles in Tailwind projects.

Preflight - Base styles

An opinionated set of base styles for Tailwind projects.