Tailwind CSS Preflight

Preflight

一套武斷的針對 Tailwind 項目預(yù)設(shè)的基礎(chǔ)樣式

基于 modern-normalize , Preflight 是一套針對 Tailwind 項目的基礎(chǔ)樣式，旨在消除跨瀏覽器的不一致性，并使您的工作更輕松地符合設(shè)計系統(tǒng)的約束。

當(dāng)您在 CSS 中包含 ?@tailwind base? 時，Tailwind 會自動注入以下樣式：

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

@tailwind components;

@tailwind utilities;

盡管 Preflight 中的大多數(shù)樣式都是不會被注意到的 — 它們只是簡單地讓事情表現(xiàn)得更像您期望的樣子 — 有些樣式是很故意為之的，當(dāng)您初次遇到它們時可能會感到驚訝。

有關(guān) Preflight 采用的所有樣式的完整參考，請參見 樣式表。

默認(rèn)的外邊距已移除

Preflight 會從標(biāo)題，塊引用，段落等元素中刪除所有默認(rèn)外邊距。

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

這樣做是為了這種情況事更難發(fā)生：不小心地依賴了用戶代理（user-agent）樣式表的邊距值，而這些邊距值并不屬于您間距比例的一部分。

標(biāo)題無樣式

默認(rèn)情況下，所有標(biāo)題元素都是完全未設(shè)置樣式的，并且其字體大?。╢ont-size）和字體粗細(xì)（font-weight）與普通文本沒有區(qū)別。

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

這個原因是雙重的：

• 它可以幫助您避免不小心地偏離了您的字形比例（type scale）。 默認(rèn)情況下，瀏覽器會為在 Tailwind 默認(rèn)字形比例（type scale）中不存在的標(biāo)題分配大小，并且不能保證這個大小會存在于您自己的字形比例（type scale）中。
• 在用戶界面（ UI ） 開發(fā)中，不應(yīng)該經(jīng)常在視覺上強(qiáng)調(diào)標(biāo)題。 默認(rèn)情況下，將標(biāo)題設(shè)置為無樣式意味著您對標(biāo)題使用的任何樣式都會是有意識和謹(jǐn)慎地進(jìn)行的。

您始終可以將默認(rèn)標(biāo)題樣式添加到項目中，請參考 添加您自己的基本樣式。

列表無樣式

默認(rèn)情況下，有序列表和無序列表是無樣式的，沒有符號標(biāo)記或數(shù)字，而且沒有外邊距或內(nèi)邊距。

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

如果您想為列表設(shè)置樣式，則可以使用 ?list-style-type? 和 ?list-style-position? 功能類：

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

您始終可以通過以下方式將默認(rèn)列表樣式添加到項目中： 添加您自己的基本樣式。

可訪問性注意事項

VoiceOver 不會將無樣式列表宣布為列表。如果您的內(nèi)容確實是一個列表，但您想保持它沒有樣式，請為元素添加一個“l(fā)ist”role：

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

圖片是塊級元素

默認(rèn)情況下，圖片和其他可替換元素 (比如 ?svg?, ?video?, ?canvas ?等) 是 ?display: block ?。

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

這有助于避免瀏覽器默認(rèn)設(shè)置中經(jīng)常遇到的意外對齊問題 ?display: inline? 。

如果您需要讓其中的一個元素使用 ?inline ?而不是 ?block?，只需使用 ?inline ?功能類：

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

邊框樣式已被全局地重置

為了能簡單地通過添加 ?border ?類就能添加邊框，Tailwind 使用了以下規(guī)則覆蓋了所有元素的默認(rèn)邊框樣式：

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

由于 ?border ?類僅設(shè)置了 ?border-width? 屬性，因此這個重置可確保使用上述類后都會始終添加一條實心的 1px 邊框，邊框的顏色是您配置的默認(rèn)邊框顏色。

集成某些第三方庫時，這可能會導(dǎo)致某些意外結(jié)果, 比如 Google maps。

當(dāng)您遇到這種情況時，可以通過使用自己的自定義 CSS 覆蓋 Preflight 樣式來解決它們：

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

按鈕默認(rèn)有輪廓

為保證我們可以提供開箱即用的樣式，我們確保了按鈕都具有默認(rèn)的輪廓。您可以通過使用 ?focus:ring? 或類似的功能類應(yīng)用到您的按鈕中來覆蓋它。

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

擴(kuò)展 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

如果您想完全禁用 Preflight - 可能是因為您要將 Tailwind 集成到現(xiàn)有項目中，或者是因為您想提供自己的基本樣式 - 您所需要做的就是在 ?tailwind.config.js? 文件的 ?corePlugins ?部分，設(shè)置 ?preflight ?為 ?false?：

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