快乐地在小程序中使用TailwindCSS！将tailwindcssJIT思想引入小程序开发！在小程序中愉快地使用TailwindCSS！使用方法uni-app(vue2/3)uni-appforvite(vue3)Tarov3(React/vue2/3)remax(react)rax(react)nativeapplet(webpack5mina)options配置项使用任意值Q&A1.我在js中写了tailwindcss的任意值，为什么没有生效？2.一些tailwindcss前缀像disabled:opacity-50没有生效？3.使用nativecomponents的注意事项4.Compiletoh5注意事项相关项目templatetemplatepresettailwindcsspresetBugs&Issues作者之前写了一个tailwindcss-miniprogram-preset，但是那个解决方案不能兼容最广泛的Justintimeengine，还有一些书写方式的变化。所以作者又写了一个weapp-tailwindcss-webpack-plugin，这是一个插件合集，包括webpack/vite插件，会同时处理wxml和wxss-like文件，方便我们开发者让jit引擎兼容配合微信小程序。该方案兼容tailwindcssv2/v3、webpackv4/v5、postcssv7/v8。随着@vue/cli-servicev5的发布，uni-app届时也将转换为webpack5+postcss8的组合。到时候我会升级uni-app的例子，从tailwindcssv2jit升级到tailwindcssv3jitUsageuni-app(vue2/3)usage|演示项目uni-appforvite(vue3)使用|Demo项目Tarov3(React/vue2/3)用法|React演示项目|vue2演示项目|vue3Demo项目如何使用remax(react)|如何使用Demo项目rax(react)|如何使用Demo工程原生小程序(webpack5mina)|模板处理方法cssMatcher(assetPath:string)=>booleanmethodformatchingwxssandotherstylefiles匹配tailwindcssjit框架生成的csschunk的方法（Taro专用）react\vue2\vue3自不同Taro框架的编译结果不同，需要显式声明框架类型DefaultreactcustomRuleCallback(node:Postcss.Rule,options:Readonly)=>void回调方法cssPreflightRecord\false可以根据需要自由定制处理方案Postcss步行。所有view节点中添加的csspresets可以根据情况自由禁用原有规则或添加新规则。详细用法如下：//defaultDefault:cssPreflight:{'box-sizing':'border-box','border-width':'0','border-style':'solid','border-color':'currentColor'}//result//box-sizing:border-box;//border-width:0;//border-style:solid;//border-color:currentColor//大小写禁用所有cssPreflight:false//result//none//case禁用个别属性cssPreflight:{'box-sizing':false}//border-width:0;//border-style:solid;//border-color:currentColor//case更改和添加单个属性cssPreflight:{'box-sizing':'content-box','background':'black'}//result//box-sizing:content-box;//border-width:0;//border-style:solid;//border-color:currentColor;//background:black使用任意值详见章节tailwindcss/using-arbitrary-values|样品问答1。我在js里写了tailwindcss的任意值，为什么没有生效？详见issue#28A：因为这个插件主要是对wxss、wxml、jsx进行转义，所以js写的字符串是不转义的。如果你有这样的需求，你可以这样写：import{replaceJs}from'weapp-tailwindcss-webpack-plugin/replace'constcardsColor=reactive([replaceJs('bg-[#4268EA]shadow-indigo-100'),replaceJs('bg-[#123456]shadow-blue-100')])不用担心全部代码都打进去体积会太大。我只暴露了'weapp-tailwindcss-webpack-plugin/replace'方法中的2个，代码大小1k左右，esm格式。2.有些tailwindcss前缀比如disabled:opacity-50不生效？详见issue#33，小程序选择器的限制。3.与原生组件一起使用注意事项如果引入原生组件时报错，可以参考issue#35，忽略指定目录下的文件，跳过插件处理，如uni-app中的wxcomponents。怎么改？在cssMatcher、htmlMatcher等传入的配置项中过滤指定的目录或文件。4、编译成h5的注意事项有些用户使用uni-app等跨终端框架开发的不仅是各种小程序，还包括H5。不过tailwindcss本身是兼容H5的。此时需要更改配置，我们以uni-app为例：constisH5=process.env.UNI_PLATFORM==='h5';//然后禁用h5环境下weapp的webpack插件和postcss//我们以uni-app-vue3-vite的demo为例//vite.config.tsimport{defineConfig}from'vite';从“@dcloudio/vite-plugin-uni”导入uni；import{ViteWeappTailwindcssPluginasvwt}from'weapp-tailwindcss-webpack-plugin';//vite插件配置constvitePlugins=[uni()];!isH5&&vitePlugins.push(vwt());exportdefaultdefineConfig({plugins:vitePlugins});//postcss配置//如果这不起作用，使用内联postcssconstisH5=process.env.UNI_PLATFORM==='h5';constplugins=[require('autoprefixer')(),require('tailwindcss')()];if(!isH5){plugins.push(require('postcss-rem-to-responsive-pixel')({rootValue:32,propList:['*'],transformUnit:'rpx'}));plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')());}module.exports={plugins};相关项目模板templateuni-app-vite-vue3-tailwind-vscode-templateuni-app-vue3-tailwind-vscode-templateuni-app-vue2-tailwind-vscode-templateweapp-native-mina-tailwindcss-templatepresettailwindcsspresettailwindcss-miniprogram-presetBugs&Issues此插件目前正在快速开发中，如果您遇到错误或想RaiseIssue欢迎在这里提交
