javascript - 未生成来自 tailwind.config.js 的自定义顺风颜色
问题描述
我目前正在使用顺风开发一个 Angular 项目。
我想添加自定义颜色,所以我修改了我的顺风配置文件:
require('dotenv').config();
const enablePurge = process.env.ENABLE_PURGE === 'true';
module.exports = {
theme : {
extend : {
colors : {
'navy' : '#102059',
'argo-dark-blue' : '#102059',
'argo-bluish-gray' : '#F4F5F9',
'argo-light-blue' : '#9BE5F8',
'argo-purple' : '#9f6af9',
},
backgroundColor : (theme) => theme('colors'),
textColor : (theme) => theme('colors'),
},
},
important : true,
purge : {
enabled : enablePurge,
content : [ './src/**/*.html', './src/**/*.scss' ],
},
theme : {
extend : {},
},
variants : {},
plugins : [],
};
我正在使用带有 hmr 配置的 webpack、postcss、ng serve。我正在使用 ng-tailwindcss 来构建。这是我的 package.json 脚本:
"scripts": {
...
"start": "ng serve --configuration hmr",
"build": "ngtw build && ng build",
...
"prestart": "ngtw build"
},
然后我尝试更改元素的背景颜色:
<span class="fa fa-file-pdf flex justify-center items-center rounded-xl text-xl w-11 h-11 mr-1 bg-argo-light-blue"></span>
即使禁用清除,自定义 css 类也不会出现在最终的 css 文件中,因此元素没有背景颜色。
解决方案
你重复了theme
:
你在这里定义它
{
// ...
theme: {
extend: {
colors: {
'navy': '#102059',
'argo-dark-blue': '#102059',
'argo-bluish-gray': '#F4F5F9',
'argo-light-blue': '#9BE5F8',
'argo-purple': '#9f6af9',
},
backgroundColor: (theme) => theme('colors'),
textColor: (theme) => theme('colors'),
},
},
// ...
}
然后马上在这里重新定义
{
// ...
theme: {
extend : {},
},
// ...
}
删除第二个,您的配置应该可以正常工作。
推荐阅读
- arrays - 用数组绘制的两条线的截距值
- sql - 使用递归作为循环创建临时 sql 表以填充自定义时间间隔
- sql-server - 错误:Oracle 280000,帐户已解锁
- python - 编写一个与 wpa_supplicant 交互的外部程序
- azure - 以编程方式将现有共享步骤与测试用例相关联
- java - AWS Lambda 上传文件损坏
- silverstripe - 如何从 Silverstripe API 检索成员列表
- bash - 如何将环境变量从 WSL 传递到 Windows 可执行文件
- windows - 在 cmd 中调用 dir 会打印出:“驱动器 C 中的卷没有标签。”
- vba - 数据表视图中的 MS Access 表单交叉表查询