我在我的 tailwind.config.js 文件中添加了新的字体系列。这些可用于 .font-sans 类，但我也想更改全局字体系列。 'tailwindcss/base' 导入在 html, body {} 选择器上添加了一个通用的无衬线系列。
有没有办法在配置文件中更改这个全局字体系列，而不仅仅是添加新样式来撤消它？
我想将整体 CSS 保持在最低限度，并且不必添加额外的 CSS 来撤消我不需要的样式。我在文档中看不到任何适用于此的选项。
原文由 alxrb 发布，翻译遵循 CC BY-SA 4.0 许可协议
当您按照官方指南 安装 Tailwind CSS 时，适用于项目 HTML 元素的默认字体系列对应于 font-sans 实用程序类，如下（预检）；
极客观点
项目管理
HarmonyOS
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
为了修改 Tailwind Preflight 配置，您可以使用 @layer 扩展 _底座_，如下所示；
/*
* Override default font-family above
* with CSS properties for the .font-serif utility.
*/
@tailwind base;
@layer base {
html {
@apply font-serif;
}
}
@tailwind components;
@tailwind utilities;
虽然是全局的（因为它适用于文档的根 HTML 元素），但上述方法会覆盖 Tailwind Preflight 配置中定义的字体系列，但在使用时确保它保留在编译的 CSS 中。
假设您只想将“Segoe UI”与 Roboto 和 sans-serif 一起使用，因为 sans font-family 以相同的顺序应用于您的 HTML 元素，没有覆盖，请使用下面的代码段；
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
],
},
},
plugins: [],
}
如果您希望应用新定义的 sans font-family （仍然没有覆盖）但使用 Tailwind 作为默认后备，请修改您的脚本，如下所示；
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
...fontFamily.sans,
],
},
},
plugins: [],
}
请注意：在上面的最后一个场景中，应用于项目的 HTML 元素的字体系列可能包含重复的字体列表，如果 Tailwind 的 .font-sans 实用程序类的 CSS 属性中已经存在（就是这种情况对于上面示例中使用的三种字体）。
假设您想使用 IBM Plex Sans Variable 作为您的自定义 sans 字体，使用常规 Tailwind CSS .font-family sans ，无需覆盖，使用下面的代码片段，然后将字体导入您的项目；
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"IBM Plex Sans"',
...fontFamily.sans,
],
},
},
plugins: [],
}
请记住：使用与 tailwind.config.js 文件中相同的字体系列名称作为自定义字体的名称 - 此处： "IBM Plex Sans" 。
原文由 nyedidikeke 发布，翻译遵循 CC BY-SA 4.0 许可协议
3 回答5.2k 阅读✓ 已解决
5 回答2.1k 阅读
2 回答2k 阅读✓ 已解决
1 回答3.1k 阅读✓ 已解决
3 回答2.5k 阅读
2 回答1.1k 阅读✓ 已解决
2 回答2.2k 阅读
对我来说，它可以覆盖“sans”，因为这是默认使用的。
（请注意，theme.fontFamily 覆盖了 3 个默认值，因此如果您复制粘贴上面的代码，您将丢失 font-serif 和 font-mono）
但是用衬线堆栈之类的东西覆盖“sans”会很奇怪，所以在这些情况下，您可以定义堆栈并将其应用于 html/body 标记：
有关顺风字体系列的更多信息