[英]Tailwind css, how to set default font color?
我在我的项目中使用 tailwind css，由于我们的应用程序 styles 我们使用的是默认字体颜色，但是我似乎无法找到如何在 tailwind 中执行此操作，文档页面仅讨论扩展调色板，但没有讨论如何设置默认颜色。
关于如何实现这一目标的任何想法？
选项很少，你可以在<body>或<html>标签中添加 class ：
<!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 播放示例
我最终在全局 css 文件上以最愚蠢的方式解决了这个问题：
html {
@apply text-gray-800
}
不漂亮，但至少我可以使用顺风课程
您可以将属性添加到body标签吗？
<body class="text-gray-800"></body>
我在我的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')},
});
})
],
}
只需在您的入口文件中导入一个普通样式表并在那里执行。 例如
p, h1, h2, h3, h4, h5, h6 {
color: green;
}
如果您使用的是 React 等客户端框架，您还可以创建 Typography 组件。 通常我首先创建一个 Text 组件，该组件具有我喜欢的字体大小、字体粗细、颜色和行高。 然后，我从该组件创建更多组件，例如 Paragraph、Header、Display...等每个组件都有自己的大小、重量和行高。 这样，我可以利用 JS（假设我想向 Text 组件添加新的道具），并且将来重构东西会更容易，因为我所有的 Typography 组件都基于一个 Text 组件。
如何使用tailwind CSS更改React JS（Next JS）中所有页面的默认屏幕背景颜色
[英]How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS
如何在solid-js和Tailwind CSS中设置特定组件的背景颜色？
[英]How to set the background color of a specific component in solid-js and Tailwind CSS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.