uniapp引入windicss安装 yarn add vite-plugin-windicss windicss @d

安装

yarn add vite-plugin-windicss windicss @dcasia/mini-program-tailwind-webpack-plugin -D

其中@dcasia/mini-program-tailwind-webpack-plugin 是windicss转译插件，解决了小程序中特殊转义字符不兼容问题。

代码修改

vite.config.ts

import WindiCSS from "vite-plugin-windicss";
import MiniProgramTailwind from "@dcasia/mini-program-tailwind-webpack-plugin/rollup";

export default defineConfig({
    plugins: [
        WindiCSS({
          scan: {
            dirs: ["."], // 当前目录下所有文件
            fileExtensions: ["vue", "js", "ts"], // 同时启用扫描vue/js/ts
          },
        }),
        MiniProgramTailwind(),
    ],
})

main.ts

import "virtual:windi-base.css";
import "virtual:windi-components.css";
import "virtual:windi-utilities.css";