Tailwind CSS - 預設樣式

Tailwind CSS **預設樣式** 是 Tailwind 專案的基礎樣式。它用於簡化不同瀏覽器上的樣式或效果。如果我們包含 **`@tailwind base`**，它將自動注入這些樣式。

Tailwind CSS 預設樣式的目的

所有標籤都帶有一些預定義的樣式。預設樣式消除了依賴使用者代理樣式表中應用的樣式（這些樣式不屬於您的間距比例）的依賴性。預設樣式用於從這些元素中刪除這些樣式。例如，標題標籤中的字型大小在標籤內定義。此預設樣式會將其移除，並將 `

` 元素內容保留為普通文字。預設樣式中有一些旨在不被注意的樣式。

示例

在下面的示例中，您將看到建立了一個 h1 元素，但輸出與您預期的不一樣。

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <h1>Tailwind CSS<h1>
</body>

</html>

預設樣式應用的樣式

預設樣式應用了很多樣式，在這篇文章中，我們將僅描述重要的樣式，完整的參考，您可以檢視此連結。

刪除預設外邊距
標題無樣式
列表無樣式
媒體元素為塊級元素
圖片受限於父元素寬度
全域性重置邊框樣式

刪除預設外邊距

HTML 中有很多元素包含一些外邊距，但是此預設樣式將透過刪除該外邊距使其成為普通元素。例如標題、塊引用、段落、預格式文字等元素。

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

標題無樣式

在 Tailwind CSS 中，所有標題元素都沒有樣式，要定義所需的文字樣式，您必須使用不同的類。

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

列表無樣式

預設樣式會去除有序列表和無序列表的樣式。它也移除了外邊距、內邊距、專案符號和編號。無樣式列表不會被 VoiceOver 宣佈為列表。如果內容確實是列表，但我們希望保持其無樣式，我們需要向元素新增“list”角色。

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

媒體元素為塊級元素

所有媒體元素（如影像、影片、畫布等）都沒有樣式。它們都是塊級元素，並垂直居中對齊。

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

圖片受限於父元素寬度

影像和影片的寬度將基於父元素的寬度設定。要設定寬度，您需要使用所需的 Tailwind CSS 類手動設定它。

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

全域性重置邊框樣式

預設樣式會覆蓋所有元素的預設邊框樣式。這使得只需使用 border 類即可輕鬆新增邊框。

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

擴充套件預設樣式

如果我們想在 Tailwind CSS 預設樣式之上新增我們自己的基礎樣式，那麼我們可以使用 **`@tailwind base`** 指令定義我們自己的 CSS。

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  a {
    @apply text-green-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

停用預設樣式

如果我們想在一個現有專案中使用 Tailwind CSS，那麼我們應該停用預設樣式，否則它會移除某些樣式，例如標題的外邊距、字型大小等。要停用預設樣式，請轉到您的 **`tailwind.config.js`** 檔案，並將 **`preflight`** 設定為 **`false`**，位於 **`corePlugins`** 部分內部。

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

列印頁面