Tailwind CSS 添加基础样式

2022-07-26 11:11 更新

添加基础样式

在 Tailwind 的基础上添加自己的全局基础样式的最佳实践。

基础（或全局）样式是样式表开头的样式，可为诸如<a> 标签、标题等基本 HTML 元素设置有用的默认值，或者有目的重置，像流行的 box-sizing reset 。

Tailwind 包含了一系列有用的开箱即用的基础样式，我们称之为 Preflight，他实际上是 modern-normalize，外加少些额外的样式。

对于大多数项目来说，Preflight 是一个很好的起点，但是如果您想添加您自己的额外的基础样式，以下是一些惯用做法的建议。

在您的 HTML 中使用类

如果您只想对 html 或者 body 元素应用某种全局样式，只需将现有类添加到 HTML 中的那些元素，而不是编写新的 CSS ：

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

使用 CSS

如果要将某些基本样式应用于特定元素，最容易的方法是将其简单地添加到 CSS 中。

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

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

通过使用 @layer 指令，Tailwind 将自动将这些样式移到 @tailwind base 的同一位置，以避免出现一些意外问题。

使用 @layer 指令还能告诉 Tailwind 在清除基础样式时考虑这些样式。阅读我们的关于生产优化的文档以了解更多信息。

最好使用 @apply 或者 theme() 来定义这些样式，以避免意外偏离您的设计系统。

@font-face 规则

您可以使用相同的方式为您正在使用的任何自定义字体添加 @font-face 规则。

@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");
  }
}

使用插件

您还可以通过 编写插件 并使用 addBase 函数来添加基础样式：

// 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 添加的样式将会与 Tailwind 的其它基础样式一起添加到 base 层中。

以上内容是否对您有帮助：

← Tailwind CSS 深色模式

Tailwind CSS 提取组件 →

写笔记

我要补充