css - 如何在 Tailwind CSS 中使用 CSS 变量
问题描述
是否可以在 Tailwind CSS 中使用 CSS 变量?例如,假设我有这些变量:
--primary-color: #fff;
--secondary-color: #000;
我想像这样在 Tailwind 中使用它们:
<div class="bg-primary-color">
<h1>Hello World</h1>
</div>
我怎样才能做到这一点?
解决方案
Armando 的回答对我不起作用,但有了这个改变,它确实起作用了。
global.css
:
无需定位类或 id。您可以使用 Pseudo-Selector https://www.w3schools.com/cssref/sel_root.asp定位根本身
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--primary-color: #fff;
--secondary-color: #000;
}
至于tailwind.config.js
:
module.exports = {
theme: {
extend: {
colors: {
"primary-color": "var(--primary-color)",
"secondary-color": "var(--secondary-color)"
},
},
},
};
推荐阅读
- sql - 尝试从 SQL 构造 JPA 查询时出现问题
- listlabel - 如何修剪列表和标签中的前导零?
- visual-studio - 如何在 Visual Studio 测试任务中仅重新运行失败的测试(失败的数据行)?
- react-native - 如何通过导航获取标题
- php - 日夜班考勤如何过滤IN和OUT?
- python - 使用 pandas 将数据帧从长转换为宽 - 单行输出
- javascript - 使用 Javascript 显示 firebase 实时数据库条目
- python - 如何使用具有 lar 的分类变量进行回归
- javascript - 数组上是否有某种 find 方法返回 [item | 未定义] 而不是项目 | 不明确的?
- powershell - 从 Chef 配方运行时不执行 New-RDSessionDeployment 命令