更新记录

0.0.1（2024-03-08）

首次发布

平台兼容性

介绍

由于小程序本身不支持由 Tailwind/Windi CSS 产生的选择器名称中包含的一些特殊转义字符（如 [ ! . 等），这使得你在开发小程序时无法使用一些本该在开发 Web 应用时使用的得心应手的灵活语法与 Arbitrary values/Value auto-infer 功能，如 w-[30px] translate-x-1/2 !bg-[#ff0000] 等。这无疑对我们的开发效率与心智负担带来了不小的影响。

为了突破这一限制，我们开发了这一款插件来帮助你在使用 Tailwind/Windi CSS 开发小程序时仍然保持着与开发 Web 应用高度一致的开发体验，你不再需要关注因为哪些字符串不被支持而不得不换一种写法的问题，而是继续按照 Tailwind/Windi CSS 的官方语法继续编写你的小程序样式，背后的兼容工作则由这款插件静默处理。

此外，本插件还集成了 rpx 值自动转换的功能。该功能可以将 Tailwind/Windi CSS 配置文件中以及源码中我们书写的 rem 与 px 单位的值在最终生成的样式文件中自动转换为 rpx 单位的值。这既可以让开发者复用在 Web 项目中使用的同一份主题配置又可以让小程序继续使用 responsive pixel 带来的特性。

开始安装

安装Npm包

npm i vite-plugin-windicss windicss -D
npm i @dcasia/mini-program-tailwind-webpack-plugin -D

新建 vite.config.js文件

// vite.config.js 
import { WindiCSS, defineConfig, MiniProgramTailwind, uni } from './js_sdk/yu-windi-plugins.js'

export default defineConfig({
    plugins: [
        WindiCSS({
            scan: {
                dirs: ['./pages', './components'], // 编译目录下所有文件   
                fileExtensions: ['vue', 'js', 'ts'], // 同时启用扫描vue/js/ts  
            },
            preflight: false,
            prefixer: false,
            corePlugins: {
                // 禁用掉在小程序环境中不可能用到的 plugins
                container: false
            }
        }),
        MiniProgramTailwind({
            enableRpx: false, // 是否开启自动转换至 rpx 单位值的功能
            designWidth: 750  // 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率
        }),
        uni(),
    ],
})

修改 main.js 文件

// 引入虚拟样式

import 'virtual:windi.css'

完成，享受便捷开发吧

重点

• 建议你在开发时关闭热重载
• 不要跟随原插件文档进行配置
• 如最新版本出现未知BUG，可以先降低为以下版本 @dcasia/mini-program-tailwind-webpack-plugin: "1.5.6" vite-plugin-windicss: "1.8.10" ** windicss: "3.5.6"

功能对比

参考文档

• mini-program-tailwind [1]: https://github.com/dcasia/mini-program-tailwind
• vite-plugin-windicss [1]: https://github.com/windicss/vite-plugin-windicss