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

Question

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

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

Answer 1

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

html {
  @apply text-gray-800
}

不太漂亮，但至少我可以使用顺风类

Answer 2

选项很少，您可以将类添加到

<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 游戏示例

Answer 3

我在尝试在我的

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

Answer 4

您可以将属性添加到 body 标签吗？

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

Answer 5

首先在

index.css

中定义前景变量：

@layer base {
  :root {
    --foreground: 202 60% 24%;
  }
}

然后将前景色添加到

tailwind.config.js

中的顺风颜色：

module.exports = {
  theme: {
    extend: {
      colors: {
        foreground: "hsl(var(--foreground))",
      }
    }
  }
}

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

问题描述投票：0回答：5

5个回答

最新问题

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

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5