Tailwind CSS 添加基礎(chǔ)樣式

2022-07-26 11:11 更新

添加基礎(chǔ)樣式

在 Tailwind 的基礎(chǔ)上添加自己的全局基礎(chǔ)樣式的最佳實(shí)踐。

基礎(chǔ)（或全局）樣式是樣式表開(kāi)頭的樣式，可為諸如?<a>? 標(biāo)簽、標(biāo)題等基本 HTML 元素設(shè)置有用的默認(rèn)值，或者有目的重置，像流行的 box-sizing reset 。

Tailwind 包含了一系列有用的開(kāi)箱即用的基礎(chǔ)樣式，我們稱之為 ?Preflight?，他實(shí)際上是 modern-normalize，外加少些額外的樣式。

對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，Preflight 是一個(gè)很好的起點(diǎn)，但是如果您想添加您自己的額外的基礎(chǔ)樣式，以下是一些慣用做法的建議。

在您的 HTML 中使用類

如果您只想對(duì) ?html ?或者 ?body ?元素應(yīng)用某種全局樣式，只需將現(xiàn)有類添加到 HTML 中的那些元素，而不是編寫新的 CSS ：

<!doctype html>
<html lang="en" class="text-gray-900 leading-tight">
  <!-- ... -->
  <body class="min-h-screen bg-gray-100">
    <!-- ... -->
  </body>
</html>

使用 CSS

如果要將某些基本樣式應(yīng)用于特定元素，最容易的方法是將其簡(jiǎn)單地添加到 CSS 中。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

通過(guò)使用 ?@layer? 指令，Tailwind 將自動(dòng)將這些樣式移到 ?@tailwind base? 的同一位置，以避免出現(xiàn)一些意外問(wèn)題。

使用 ?@layer? 指令還能告訴 Tailwind 在清除基礎(chǔ)樣式時(shí)考慮這些樣式。閱讀我們的關(guān)于生產(chǎn)優(yōu)化的文檔以了解更多信息。

最好使用 ?@apply? 或者 ?theme()? 來(lái)定義這些樣式，以避免意外偏離您的設(shè)計(jì)系統(tǒng)。

@font-face 規(guī)則

您可以使用相同的方式為您正在使用的任何自定義字體添加 ?@font-face? 規(guī)則。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

使用插件

您還可以通過(guò) 編寫插件 并使用 ?addBase ?函數(shù)來(lái)添加基礎(chǔ)樣式：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
        'h3': { fontSize: theme('fontSize.lg') },
      })
    })
  ]
}

使用 ?addBase ?添加的樣式將會(huì)與 Tailwind 的其它基礎(chǔ)樣式一起添加到 ?base ?層中。

以上內(nèi)容是否對(duì)您有幫助：

← Tailwind CSS 深色模式

Tailwind CSS 提取組件 →

寫筆記

我要補(bǔ)充