Preflight

概述（Overview）

Preflight 建構於 modern-normalize 之上，是一組為 Tailwind 專案設計的基礎樣式，旨在消除跨瀏覽器的不一致性，讓你更容易在設計系統的約束下工作。

當你在專案中匯入 tailwindcss 時，Preflight 會自動注入到 base 層：

CSS

@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 套用的所有樣式的完整參考，請查看樣式表。

邊距已移除（Margins are removed）

Preflight 會移除所有元素的預設邊距，包括標題、引用區塊、段落等：

CSS

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

這使你更難意外地依賴使用者代理樣式表所套用的邊距值，而這些值並不屬於你的間距比例。

邊框樣式已重設（Border styles are reset）

為了讓你能簡單地透過新增 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;  }}

標題無樣式（Headings are unstyled）

所有標題元素預設完全沒有樣式，字體大小和粗細與普通文字相同：

CSS

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

這樣做的原因有兩個：

幫助你避免意外偏離你的字型比例。預設情況下，瀏覽器會為標題指定不存在於 Tailwind 預設字型比例中的大小，也不保證存在於你自己的字型比例中。
在 UI 開發中，標題通常應該在視覺上被弱化。預設讓標題沒有樣式意味著你對標題套用的任何樣式都是有意識且刻意的。

你可以隨時透過新增自己的基礎樣式來為專案加入預設的標題樣式。

列表無樣式（Lists are unstyled）

有序列表和無序列表預設沒有樣式，沒有項目符號或數字：

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>

你可以隨時透過新增自己的基礎樣式來為專案加入預設的列表樣式。

無障礙考量（Accessibility considerations）

無樣式的列表不會被 VoiceOver 朗讀為列表。如果你的內容確實是列表但你想保持無樣式，請在元素上新增 "list" 角色：

HTML

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

圖片為區塊級元素（Images are block-level）

圖片和其他替換元素（如 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="..." />

圖片受限制（Images are constrained）

圖片和影片會被限制在父元素寬度內，同時保留其固有的長寬比：

CSS

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

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

HTML

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

具有 `hidden` 屬性的元素保持隱藏（Elements with a `hidden` attribute stay hidden）

CSS

[hidden]:where(:not([hidden="until-found"])) {  display: none !important;}

這確保具有 hidden 屬性的元素保持不可見，除非使用 hidden="until-found"。如果你希望元素對使用者可見，請移除 hidden 屬性。

擴充 Preflight（Extending 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（Disabling Preflight）

如果你想完全停用 Preflight——也許是因為你正在將 Tailwind 整合到現有專案中，或者你更喜歡定義自己的基礎樣式——你可以只匯入 Tailwind 中你需要的部分。

預設情況下，@import "tailwindcss"; 會注入以下內容：

CSS

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

要停用 Preflight，只需省略其匯入而保留其他所有內容：

CSS

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

當單獨匯入 Tailwind CSS 的檔案時，source()、theme() 和 prefix() 等功能應該放在各自的匯入上。

例如，來源偵測會影響產生的通用類別，因此 source(…) 應該新增到 utilities.css 匯入：

CSS

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

important 也是如此，它同樣影響通用類別：

CSS

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

同樣地，theme(static) 和 theme(inline) 會影響產生的主題變數，應該放在 theme.css 匯入上：

CSS

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

最後，使用 prefix(tw) 設定前綴會影響通用類別和變數，因此應該放在兩個匯入上：

CSS

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

On this page