vue3 + vite 项目中使用windicss

1、安装依赖：

   a、使用npm安装：

npm install -D vite-plugin-windicss windicss

  b、使用yarn安装：

yarn add vite-plugin-windicss windicss --dev

2、使用插件；：在vite.config.ts 或 vite.config.js 中加入以下代码；

import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({
	plugins: [
    	WindiCSS()
  ],
})

3、在main.js 或 main.ts 中导入样式 ：

import 'virtual:windi.css'

4、 在 windi.config.ts 或 windi.config.js中配置；

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  attributify: {
    prefix: 'w:'
  },
  alias: {
    hstack: 'flex items-center',
    vstack: 'flex flex-col',
    icon: 'w-6 h-6 fill-current',
    app: 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300'
  }
})