Tailwind css，如何设置默认字体颜色？

Question

我在我的项目中使用 tailwind css，由于我们的应用程序样式，我们使用默认字体颜色，但是我似乎找不到如何在 tailwind 中执行此操作，documentation 页面只谈到扩展调色板，而不是如何设置默认颜色。

关于如何实现这一点有什么想法吗？

Answer 1

只需在您的条目文件中导入一个普通的样式表并在那里执行。例如

p, h1, h2, h3, h4, h5, h6 {
  color: green;
}

如果您使用的是 React 等客户端框架，您还可以创建 Typography 组件。通常我首先创建一个文本组件，它具有我喜欢的字体大小、字体粗细、颜色和行高。然后，我从该组件创建更多组件，例如段落、页眉、显示等，每个组件都有自己的大小、粗细和行高。这样，我就可以利用 JS（假设我想向 Text 组件添加新的 props），而且以后重构东西会更容易，因为我所有的 Typography 组件都基于一个 Text 组件。

Answer 2

我最终以最愚蠢的方式在全局 css 文件上解决了这个问题：

html {
  @apply text-gray-800
}

不漂亮但至少我可以顺风类

Answer 3

你能把属性添加到 body 标签吗？

<body class="text-gray-800"></body>

Answer 4

选项很少，可以在<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;

播放https://play.tailwindcss.com/54UrOn1txd示例

Answer 5

我在我的 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')},
      });
    })
  ],
}

Tailwind css，如何设置默认字体颜色？

Tailwind css, how to set default font color?

javascript

css

tailwind-css