版本：

"windicss": "^3.5.6"

"vite-plugin-windicss": "^1.8.7",

使用windicss想使用windicss自带的颜色，但是设置不成功，代码如下

<div class="text-blue-600">你好</div>

期望是文字颜色改为这个

没生效因为在windi.config.ts中自定义了，colors，但是没有引入库中的颜色，windi.config.ts配置如下

import { defineConfig } from 'vite-plugin-windicss'
import colors from 'windicss/colors'export default defineConfig({attributify: true,theme: {colors: {...colors,  // 想要使用windi自带的文字颜色，需要加上这句dark: '#000', // 这里自定义了颜色}},
})

当然如果你没有在windi.config.ts中自定义颜色，就不用引入默认的颜色也能用

import { defineConfig } from 'vite-plugin-windicss'
import colors from 'windicss/colors'export default defineConfig({attributify: true,theme: {}, // 没有自定义colors ,直接就可以用默认的颜色设置字体
})

如何让背景色支持默认颜色？如果直接这样写是不生效的

<div class="bg-blue-600">你好</div>

同样需要在配置文件windi.config.ts中配置backgroundColor，并且把默认颜色配置进去

import { defineConfig } from 'vite-plugin-windicss'
import colors from 'windicss/colors'export default defineConfig({attributify: true,theme: {colors: {...colors,  // 想要使用windi自带的文字颜色，需要加上这句dark: '#000', // 这里自定义了颜色},backgroundColor: {...colors, // 这样背景色也可以使用winddi自带的颜色了}},
})

更多配置，参考官网

Colors | Windi CSSNext generation utility-first CSS framework.https://windicss.org/utilities/general/colors.html

2022-12-13更新

有的时候，在windi.config.ts中的配置都不生效，貌似是一个bug，至今尚未解决，试试这样解决，在vite.config.ts中，引用windi的时候加上config选项，值为windi.config.ts的路径名，我测试是可以的。

// vite.config.tsimport windi from 'vite-plugin-windicss'
import { resolve } from 'path'export const defaultOption = {base: './',plugins: [vue(),windi({config: resolve(__dirname, './windi.config.ts'), // 指定配置文件目录scan: {dirs: ['.'], // 当前目录下所有文件fileExtensions: ['vue', 'tsx'], // 同时启用扫描vue/tsx},}),],// ...
}export default defineConfig(defaultOption)

参考原文

unable to find windi.config.js file · Issue #291 · windicss/vite-plugin-windicss · GitHubDescribe the bug unable to find windi.config.js file unless i specifically set config option to absolute path of windi.config.js file. windi.config.js file is in same location as vite.config.js file. It is working but It just does not ef...https://github.com/windicss/vite-plugin-windicss/issues/291

【前端工程化】windicss ，默认自带的字体颜色不好使，在背景色background-color中使用默认颜色的配置，windi.config.ts的配置注意事项相关推荐

photoshop 字体小_如何在Photoshop和Illustrator中设置默认字体
photoshop 字体小 Photoshop and Illustrator are powerful, but not exactly intuitive. That goes double fo ...
jupyter notebook环境配置(重写config文件、配置默认工作文件路径、如何解决需要token登陆的问题/解决无法跳转浏览器问题等)
一.重写config文件 1.输入cmd命令 jupyter notebook --generate-config 2.根据文件生成路径找到generate-config文件 3.双击或者记事本打开j ...
【CSDN软件工程师能力认证学习精选】什么是前端工程化？
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
php默认字体是什么,在word中系统默认的中文字体和字号是什么,word默认字体
在word中系统默认的中文字体和字号是什么默认的中文字体和字号是多少,在word中,默认的中文字体和字号是"Tahoma"和"5号"."宋体" ...
windows自带的字体和简介
Agency FB:一种装饰性字体,具有现代风格的字形,常用于广告和标志设计. Algerian:一种装饰性字体,具有高度装饰性的字形,常用于标题和标志设计. Andalus:一种阿拉伯文手写字体,具 ...
MarkDown常用使用技巧---字体颜色、大小、背景色、表格、图片大小修改---CSDN篇
文章目录 1.颜色中的各种色号问题 2.段落中的字体大小.颜色.字体类型 3.文字背景色.整行背景色 4.备注信息中的颜色 5.markdown表格 (1)快速创建表格 (2)表格对齐方式 6.修改插 ...
手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
android自带中文字体,Android更换系统默认显示的字体使用自定义字体
序言上一篇Android 自定义字体,更换系统默认显示的字体使用自定义字体有讲到怎样指定控件显示指定字体,怎样整个软件显示指定字体,怎样WebView加载指定字体,但是还留下一个怎样修改整个系统的默 ...

【前端工程化】windicss ，默认自带的字体颜色不好使，在背景色background-color中使用默认颜色的配置，windi.config.ts的配置注意事项

2022-12-13更新

【前端工程化】windicss ，默认自带的字体颜色不好使，在背景色background-color中使用默认颜色的配置，windi.config.ts的配置注意事项相关推荐

最新文章

热门文章