一、背景介绍

2021年开始，国外很流行原子化css框架（tailwindcss、windicss）。

目前国内使用的人还不是很多；

1. 一些人持有反对意见，觉得很麻烦，很像内联样式。
2. 另外一些人，觉得有帮助，能解决自己开发中遇到的问题（我就是支持者）。

通过对比，个人认为windicss比tailwindcss好用许多，下面介绍一下如何在uniapp使用windicss

二、集成步骤

1）更新hbuilder最新版

2）创建一个uniapp项目，找到manifest.json文件，vue版本选择3

3）安装依赖：

cnpm i -D vite-plugin-windicss windicss

4）创建vite.config.js

import WindiCSS from 'vite-plugin-windicss'
import {
	defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
	plugins: [
		WindiCSS({
			scan: {
				dirs: ['.'], // 当前目录下所有文件
				fileExtensions: ['vue', 'js', 'ts'], // 同时启用扫描vue/js/ts
			},
		}),
		uni(),
	],
})

5) 在main.js文件引入

// import 'virtual:windi.css'

// 引入组件和工具类
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'

6) 运行项目、并测试类名

你好，世界！

7) 如下效果，那恭喜你，完成了

三、如果有用的话，点赞支持一下哈。