Preflight

概觀

Preflight 建構於 modern-normalize 之上，是一組針對 Tailwind 專案的基礎樣式，旨在消除跨瀏覽器不一致性，並讓您更容易在設計系統的限制內工作。

當您將 tailwindcss 導入到您的專案時，Preflight 會自動注入到 base 層。

CSS

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

雖然 Preflight 中的大多數樣式旨在不被注意 - 它們只是讓事情的行為更符合您的預期 - 但有些樣式更加獨特，當您第一次遇到它們時可能會感到驚訝。

如需 Preflight 套用的所有樣式的完整參考，請參閱樣式表。

移除邊界

Preflight 會移除所有元素的預設邊界，包括標題、引言、段落等。

CSS

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

這使得您更難以意外地依賴使用者代理樣式表套用的邊界值，而這些邊界值並非您間距比例的一部分。

邊框樣式已重設

為了讓您輕鬆透過僅新增 border 類別來新增邊框，Tailwind 會使用以下規則覆寫所有元素的預設邊框樣式

CSS

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

由於 border 類別只會設定 border-width 屬性，此重設可確保新增該類別時，一律會新增使用 currentColor 的實心 1px 邊框。

當整合某些協力廠商程式庫時，例如Google 地圖，這可能會導致一些非預期的結果。

當您遇到類似情況時，您可以透過使用您自己的自訂 CSS 來覆寫 Preflight 樣式來解決它們

CSS

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

標題未設定樣式

所有標題元素預設都是完全不設定樣式，並具有與一般文字相同的字型大小和粗細。

CSS

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

這樣做的原因有兩個：

它可協助您避免意外偏離您的字型比例。預設情況下，瀏覽器會將大小指派給 Tailwind 預設字型比例中不存在，且不保證會存在於您自己的字型比例中的標題。
在 UI 開發中，標題通常應在視覺上被弱化。預設情況下不對標題設定樣式表示您套用至標題的任何樣式都是有意識且經過深思熟慮的。

您隨時可以透過新增您自己的基礎樣式，將預設標題樣式新增至您的專案。

清單未設定樣式

預設情況下，已排序和未排序的清單都未設定樣式，沒有項目符號或數字。

CSS

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

如果您想設定列表樣式，可以使用 list-style-type 和 list-style-position 工具類別。

HTML

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

您可以隨時透過加入自己的基礎樣式，將預設列表樣式新增至您的專案中。

無障礙考量

未設定樣式的列表會被 VoiceOver 宣告為非列表。如果您的內容實際上是列表，但您希望保持未設定樣式，請為元素加上 "list" role。

HTML

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

圖片是區塊級元素

圖片和其他被取代的元素（如 svg、video、canvas 等）預設為 display: block。

CSS

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

這有助於避免您在使用瀏覽器預設的 display: inline 時經常遇到的意外對齊問題。

如果您需要將這些元素設為 inline 而非 block，只需使用 inline 工具類別即可。

HTML

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

圖片受到約束

圖片和影片會被約束在其父元素的寬度內，並以保留其內建長寬比的方式呈現。

CSS

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

這可以防止它們溢出容器，並使其預設為響應式。如果您需要覆蓋此行為，請使用 max-w-none 工具類別。

HTML

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

擴展 Preflight

如果您想在 Preflight 的基礎上新增自己的基礎樣式，請使用 @layer base 將它們新增至 CSS 中的 base CSS 層。

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"; 注入的內容。

CSS

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

若要停用 Preflight，只需省略其導入，同時保留其他所有內容即可。

CSS

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

本頁內容