免费AI编程助手
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 层中。
以上内容是否对您有帮助：
更多建议：