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 ​层中。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号