我在项目中使用Tailwind CSS，由于我们的应用程序样式正在使用默认字体颜色，但是我似乎找不到如何在Tailwind中实现这一点的方法。 文档 页面仅介绍了如何扩展颜色调色板，但没有说明如何设置默认颜色。
你有什么想法吗？
5个回答
27
我最终以最蠢的方式解决了这个问题，在全局CSS文件中：
html {
@apply text-gray-800
}
不太好看，但至少我可以使用Tailwind类
- Oscar Franco
3
在基础层？ - Binajmen
1我没有费心去理解Tailwind层是做什么的，你也许是对的，我只是想让它工作。 - Oscar Franco
22
有几个选项可供选择，您可以向 <body> 或 <html> 标记添加类：
<!doctype html>
<html lang="en">
<body class="text-green-500">
</body>
</html>
或者你可以在你的index.css文件中直接扩展基础层：
@tailwind base;
@layer base {
html {
@apply text-green-500;
}
}
@tailwind components;
@tailwind utilities;
让我们来看一个Tailwind Play示例
- OzzyCzech
2
1第二部分是我首选的解决方案。 - Hillsie
我喜欢在我的主题（tailwind.config.js）中创建自定义颜色，并在
@apply text-fg中使用它。 - Martin Schaer5
我在尝试编辑tailwind.config.js文件时来到了这里。
以下是需要的步骤：
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({addBase, theme}) => {
addBase({
// or whichever color you'd like
'html': {color: theme('colors.slate.800')},
});
})
],
}
- tgtb
2
你能否将属性添加到body标签中？
<body class="text-gray-800"></body>
- alexmcfarlane
-4
只需在您的入口文件中导入普通样式表并在那里进行操作。例如：
如果您正在使用像React这样的客户端框架，您也可以创建排版组件。通常我会先创建一个文本组件，其中包含我喜欢的字体大小、字重、颜色和行高。然后我从该组件创建更多的组件，如段落、标题、展示等，每个组件都有自己的大小、重量和行高。
这样，我就可以利用JS（比如说我想给文本组件添加新的属性），而且以后重构东西也更容易，因为所有我的排版组件都是基于一个文本组件的。
p, h1, h2, h3, h4, h5, h6 {
color: green;
}
如果您正在使用像React这样的客户端框架，您也可以创建排版组件。通常我会先创建一个文本组件，其中包含我喜欢的字体大小、字重、颜色和行高。然后我从该组件创建更多的组件，如段落、标题、展示等，每个组件都有自己的大小、重量和行高。
这样，我就可以利用JS（比如说我想给文本组件添加新的属性），而且以后重构东西也更容易，因为所有我的排版组件都是基于一个文本组件的。
- T. Dayya
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
theme()在CSS中访问它们。 - pilchard