Preflight

概要

modern-normalizeを基盤として構築されたPreflightは、クロスブラウザの非一貫性を解消し、デザインシステムの制約内で作業しやすくするために設計された、Tailwindプロジェクト向けのベーススタイルのセットです。

tailwindcssをプロジェクトにインポートすると、Preflightは自動的にbaseレイヤーに注入されます。

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Preflightのスタイルのほとんどは、気づかれないように意図されています。つまり、物事をより期待どおりに動作させるだけですが、一部はより独断的であり、最初に遭遇したときに驚くことがあります。

Preflightによって適用されるすべてのスタイルの完全なリファレンスについては、スタイルシートを参照してください。

マージンが削除されました

Preflightは、見出し、引用、段落など、すべての要素からデフォルトのマージンをすべて削除します。

*,
::after,
::before,
::backdrop,
::file-selector-button {
  margin: 0;
  padding: 0;
}

これにより、ユーザーエージェントのスタイルシートによって適用されるマージン値で、スペーシングスケールの一部ではないものに誤って依存することが難しくなります。

ボーダースタイルがリセットされました

borderクラスを追加するだけで簡単にボーダーを追加できるようにするために、Tailwindは次のルールを使用して、すべての要素のデフォルトのボーダースタイルをオーバーライドします。

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  border: 0 solid;
}

borderクラスはborder-widthプロパティのみを設定するため、このリセットにより、そのクラスを追加すると、常にcurrentColorを使用する実線1pxボーダーが追加されるようになります。

これにより、Googleマップなど、特定のサードパーティライブラリを統合する際に、予期しない結果が発生する可能性があります。

このような状況に遭遇した場合は、独自のカスタムCSSでPreflightスタイルをオーバーライドすることで回避できます。

@layer base {
  .google-map * {
    border-style: none;
  }
}

見出しはスタイルなし

すべての見出し要素はデフォルトで完全にスタイルなしで、通常のテキストと同じフォントサイズと太さを持っています。

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

これには2つの理由があります。

• タイプスケールから誤って逸脱するのを防ぐのに役立ちます。デフォルトでは、ブラウザは見出しにTailwindのデフォルトのタイプスケールに存在しないサイズを割り当て、独自のタイプスケールに存在することが保証されていません。
• UI開発では、見出しはしばしば視覚的に強調されないようにする必要があります。見出しをデフォルトでスタイルなしにすることで、見出しに適用するスタイルは意識的かつ意図的に行われます。

独自のベーススタイルを追加することで、プロジェクトにデフォルトの見出しスタイルをいつでも追加できます。

リストはスタイルなし

順序付きリストと順序なしリストはデフォルトでスタイルなしで、箇条書きや番号はありません。

ol,
ul,
menu {
  list-style: none;
}

リストをスタイル設定する場合は、list-style-typeおよびlist-style-positionユーティリティを使用して行うことができます。

<ul class="list-inside list-disc">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

独自のベーススタイルを追加することで、プロジェクトにデフォルトのリストスタイルをいつでも追加できます。

アクセシビリティに関する考慮事項

スタイルなしのリストは、VoiceOverによってリストとしてアナウンスされません。コンテンツが本当にリストであるが、スタイルなしのままにしたい場合は、要素に「list」ロールを追加してください。

<ul role="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

画像はブロックレベル

画像やその他の置換要素（svg、video、canvasなど）は、デフォルトでdisplay: blockです。

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

これにより、ブラウザのデフォルトであるdisplay: inlineを使用した場合によく発生する予期しない配置の問題を回避できます。

これらの要素のいずれかをblockではなくinlineにする必要がある場合は、inlineユーティリティを使用するだけです。

<img class="inline" src="..." alt="..." />

画像は制約されています

画像とビデオは、親の幅に合わせて制約されており、固有のアスペクト比が保持されるようになっています。

img,
video {
  max-width: 100%;
  height: auto;
}

これにより、コンテナからオーバーフローするのを防ぎ、デフォルトでレスポンシブになります。この動作をオーバーライドする必要がある場合は、max-w-noneユーティリティを使用してください。

<img class="max-w-none" src="..." alt="..." />

Preflightの拡張

Preflightの上に独自のベーススタイルを追加する場合は、@layer baseを使用してCSSのbase CSSレイヤーに追加します。

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

詳細については、ベーススタイルの追加に関するドキュメントを参照してください。

Preflightの無効化

Preflightを完全に無効にしたい場合（おそらく、既存のプロジェクトにTailwindを統合している場合や、独自のベーススタイルを定義したい場合など）、必要なTailwindの部分のみをインポートすることで実行できます。

デフォルトでは、@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);

Preflightを無効にするには、他のすべてを保持しながら、そのインポートを省略するだけです。

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);