【Tailwind和訳】BASE STYLES/Preflight
この記事について
この記事は、BASE STYLES/Preflightの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Preflight
Tailwind プロジェクトのためのベーススタイルの意見をまとめました。
modern-normalize の上に構築された Preflight は、Tailwind プロジェクト用のベーススタイルのセットで、クロスブラウザの不整合をスムーズにし、デザインシステムの制約の中での作業を容易にするように設計されています。
Tailwind は、CSS に @tailwind base を含めると、これらのスタイルを自動的に注入します。
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;
Preflight のスタイルのほとんどは気付かれないようになっていますが、中には個性的なものもあり、初めて出会ったときは驚くかもしれません。
Preflight によって適用されるすべてのスタイルの完全なリファレンスについては、スタイルシートを参照してください。
デフォルトマージンの削除｜ Default margins are removed
プリフライトは、見出し、ブロッククオート、段落などの要素からデフォルトの余白をすべて取り除きます。
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
これにより、ユーザーエージェントのスタイルシートによって適用された、スペーシングスケールの一部ではないマージン値に、誤って依存してしまうことがなくなります。
見出しはスタイルなし｜ Headings are unstyled
すべての見出し要素は、デフォルトではまったくスタイルを持たず、通常のテキストと同じ font-size と font-weight を持ちます。
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
その理由は 2 つあります。
- 誤ってタイプスケールから外れてしまうのを防ぐためです。デフォルトでは、ブラウザは Tailwind のデフォルトのタイプスケールには存在しない見出しにサイズを割り当てます。
- UI 開発において、見出しはしばしば視覚的に強調されないようにすべきです。見出しをデフォルトでスタイルなしにすることは、見出しに適用されるスタイルが意識的かつ意図的に行われることを意味します。
独自のベーススタイルを追加することで、プロジェクトにデフォルトのヘッダースタイルをいつでも追加することができます。
記事スタイルの部分に、センスの良いデフォルトの見出しスタイルを選択的に導入したい場合は、@tailwindcss/typography プラグインをお勧めします。
リストもスタイルなし｜ Lists are unstyled
順序付きリストと順序なしリストは、デフォルトではスタイルが設定されておらず、箇条書きや数字、margin や padding はありません。
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 プラグインをお勧めします。
アクセシビリティに関する考慮事項
スタイルが設定されていないリストは、VoiceOver によってリストとしてアナウンスされません。コンテンツが本当にリストであるにもかかわらず、スタイルを変えずに表示したい場合は、要素に"list" role を追加してください。
<ul role="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
画像はブロックレベル｜ Images are block-level
画像やその他の置換された要素（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="..." />
ボーダーのスタイルはグローバルにリセット｜ Border styles are reset globally
border クラスを追加するだけで簡単にボーダーを追加できるように、Tailwind では全ての要素のデフォルトのボーダースタイルを以下のルールで上書きしています。
*,
::before,
::after {
border-width: 0;
border-style: solid;
border-color: theme("borderColor.default", currentColor);
}
border クラスは border-width プロパティを設定するだけなので、このリセットにより、border クラスを追加すると、設定されたデフォルトのボーダーカラーを使用して、常に 1px のソリッドボーダーが追加されるようになります。
このため、Google マップなどのサードパーティ製ライブラリを統合する際に、予期せぬ結果を招くことがあります。
このような場合は、独自のカスタム CSS でプリフライトスタイルをオーバーライドすることで回避することができます。
.google-map * {
border-style: none;
}
ボタンにはデフォルトのアウトラインを適用｜ Buttons have a default outline
アクセシブルなスタイルを確実に提供するために、ボタンにはデフォルトのアウトラインが設定されています。もちろん、focus:ring や同様のユーティリティーをボタンに適用することで、これを上書きすることができます。
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
Preflight の拡張｜ Extending Preflight
Preflight の上に独自のベーススタイルを追加したい場合は、@layer base ディレクティブ内の CSS に追加するだけです。
@tailwind base;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
a {
@apply text-blue-600 underline;
}
}
@tailwind components;
@tailwind utilities;
詳細は、「ベーススタイルの追加」のドキュメントをご覧ください。
Preflight の無効化｜ Disabling Preflight
既存のプロジェクトに Tailwind を組み込む場合や、独自のベーススタイルを提供したい場合など、プリフライトを完全に無効にしたい場合は、tailwind.config.js ファイルの corePlugins セクションで preflight を false に設定するだけです。
module.exports = {
corePlugins: {
+ preflight: false,
}
}
Discussion