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

版本：

"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.ts

import 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