Tailwind css,如何设置默认字体颜色?

Osc*_*nco 7 javascript css tailwind-css

我在我的项目中使用了 tailwind css,由于我们的应用程序样式,我们使用的是默认字体颜色,但是我似乎无法在 tailwind 中找到如何执行此操作,文档页面仅讨论扩展调色板,但未讨论如何扩展设置默认颜色。

关于如何实现这一目标的任何想法?

Osc*_*nco 28

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

html {
  @apply text-gray-800
}
Run Code Online (Sandbox Code Playgroud)

不太漂亮,但至少我可以使用顺风课程


Ozz*_*ech 23

有几个选项,您可以将类添加到<body><html>标记:

<!doctype html>
<html lang="en">
  <body class="text-green-500">
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

或者您可以在index.css文件中扩展基础层:

@tailwind base;

@layer base {
  html {
    @apply text-green-500;
  } 
}

@tailwind components;
@tailwind utilities;
Run Code Online (Sandbox Code Playgroud)

让我们看一下Tailwind 播放示例


tgt*_*gtb 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')},
      });
    })
  ],
}
Run Code Online (Sandbox Code Playgroud)