javascript - Tailwind CSS 自定义颜色应用于文本而不是 ReactJS 中的背景
问题描述
好的,所以我的问题不仅仅是标题。我一直在尝试在我的 React 应用程序中添加自定义颜色,但遇到了多个问题。
这是我的一些代码:
// tailwind.config.js
module.exports = {
purge: [],
theme: {
colors: {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
},
extend: {},
},
variants: {},
plugins: [],
};
// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.theme-TCD {
--color-primary: #411218;
--color-secondary: #e8982e;
}
我最初使用 npm 按照本教程设置我的 React 应用程序,但这不起作用。当我使用纱线按照本教程进行操作时,一些自定义颜色正在正确应用。
仅应用自定义文本颜色,而不应用背景颜色。
自定义文本颜色仅适用于 React 元素。它不适用于纯 HTML 标记。IE
import React from "react";
import Hello from "./hello";
function App() {
return (
<div className="theme-TCD">
<h1 className="text-primary">Hello World!</h1> // This does not work
<Hello /> // This works
</div>
);
}
export default App;
解决方案
尝试反转tailwind.css文件中的出现顺序并更改为:
:root {
--color-primary: #411218;
--color-secondary: #e8982e;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
推荐阅读
- node.js - 快速路由 - 如何要求包含基于 URL 参数的路由的文件?
- vue.js - 调整 vuetify 项目的高度
- kubernetes - 我可以获得比一次重启前更旧的容器日志吗?
- java - 什么端口使用stomp协议?
- javascript - 使用同步发送一个道具并在孩子中使用 v-model 绑定它
- python - ADB 方法使用 python adb.devices() 冻结
- node.js - 如何在节点 ejs 中显示来自动态路径的图像
- java - 持久的 Google 登录 Android Studio
- python - 如何检测不和谐的用户流活动更新(discord.py)
- javascript - 在所有文件中全局导入 ReactJS 组件