プリフライト

Tailwindプロジェクトの基本スタイルの独善的セット。


Overview

Preflightは、normalize.cssの上に構築された、 Tailwindプロジェクトの基本スタイルのセットであり、ブラウザー間の不整合を滑らかにし、設計システムの制約内での作業を容易にするように設計されています。

CSSに@tailwind baseを含めると、Tailwindはこれらのスタイルを自動的に挿入します。

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

プリフライトのほとんどのスタイルは見過ごされがちですが、単にあなたの期待以上の動作するようになっています。一部のスタイルはより独善的で、最初に遭遇したときに驚くことがあります。

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


Default margins are removed

プリフライトは、見出し、ブロック引用符、段落などの要素からデフォルトの余白をすべて削除します。

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

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


Headings are unstyled

すべての見出し要素はデフォルトで完全にスタイルが設定されておらず、通常のテキストと同じフォントサイズとフォントウェイトを持っています。

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

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

  • タイプスケールから誤って逸脱するのを防ぐのに役立ちます。 デフォルトでは、ブラウザはTailwindのデフォルトのタイプスケールに存在しない見出しにサイズを割り当て、独自のタイプスケールに存在することが保証されていません。

  • UI開発では、見出しを視覚的に強調しないようにする必要があります。 デフォルトで見出しのスタイルを解除するということは、見出しに適用するスタイルが意識的かつ意図的に行われることを意味します。

独自の基本スタイルを追加を使用すると、いつでもデフォルトのヘッダースタイルをプロジェクトに追加できます。

実用的なデフォルトの見出しスタイルをページの記事スタイルの部分に選択的に導入したい場合は、@tailwindcss / typography pluginをお勧めします。


Lists are unstyled

順序付きリストと順序なしリストは、デフォルトではスタイルが設定されておらず、箇条書きや数字、余白やパディングはありません。

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

デフォルトのリストスタイルをページの記事スタイルの部分に選択的に導入したい場合は、@tailwindcss/typographyプラグインをお勧めします。


Images are block-level

画像やその他の置き換えられた要素(svg, video, canvasなど) は、デフォルトではdisplay:blockです。

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

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

これらの要素の1つをblockではなくinlineにする必要がある場合は、単にinlineユーティリティを使用してください。

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

Border styles are reset globally

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

*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.default', currentColor);
}

borderクラスはborder-widthプロパティのみを設定するため、このリセットにより、そのクラスを追加すると、構成済みのデフォルトの境界線の色を使用して、常に1pxの境界線が追加されます。

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

このような状況が発生した場合は、プリフライトスタイルを独自のカスタムCSSでオーバーライドすることで回避できます。

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

Extending Preflight

プリフライトの上に独自のベーススタイルを追加したい場合は、CSSの@tailwind baseの後に追加するだけです。

@tailwind base;

h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

@tailwind components;

@tailwind utilities;

詳しくはadding base styles documentationをご覧ください。


Disabling Preflight

プリフライトを完全に無効にしたい場合、おそらくTailwindを既存のプロジェクトに統合しているため、または独自の基本スタイルを提供したい場合など。 あなたがする必要があるのはtailwind.config.jsファイルのcorePluginsセクションでpreflightfalseに設定することです。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
+     preflight: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!