Tailwind CSS on GitHub

添加基础样式

尝试在Tailwind样式最前面添加你自己的全局基本样式。

基本(或全局)样式是位于样式表开头的样式,它为基本HTML元素(如<a>标签、标题等)设置有用的默认值,或者重置样式,如box-sizing

Tailwind包含了一组非常有用的基本样式,我们称之为Preflight,它实际上只是modern-normalize的更彻底的版本。

对于大多数项目来说,Preflight都是一个很好的开始,但是如果你想添加自己的额外的基础样式,这里有一些建议。


在HTML中使用class

如果你只是想对htmlbody元素应用一些全局样式,尝试只添加已有的类,而不是编写新的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在清理基础层时考虑这些样式。了解更多细节,请阅读我们关于优化生产的文档

使用@applytheme()来定义这些样式是一个好的选择,以避免跟你的设计风格不一致。

@font-face rules

你可以使用相同的方法来添加你的@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方法添加的所有基础样式,都会被注入base层级里面,跟其他的Tailwind基础样式拥有一样的权重。