/*每个页面通用的css*///需要安装scssyarnadd-Dsasssass-loader@^10//applet需要'base'来注入变量，但不是htmlpreflight//@tailwindbase;//@tailwindutilities;@import'tailwindcss/base';@import'tailwindcss/utilities';让小程序开发进入tailwindjit时代！将tailwindcssJIT的思想带入小程序的开发中！作者在几个月前写了一个tailwindcss-miniprogram-preset预设，但是这个预设方案的可操作性很小，而且不兼容tailwindcssv2/v3的Justintimeengine。同时，书写法体也有一定的变化。于是作者又设计了一个方案，最终实现了weapp-tailwindcss-webpack-plugin。与原有的preset或postcss方案相比，该方案有很多优势：专为jit设计，兼容v2/v3jit引擎开发者无需记忆任何额外的编写变体，带来原汁原味的tailwindcss开发体验兼容webpackv4/v5-基于applet的多端开发框架，简单易用，下面我们来展示一个基于uni-app的demo，快速体验一下这个方案。最佳实践前期准备：vscode、vscode-tailwindcss、nodejslts、微信开发者工具1、通过vue-cli命令行创建项目。这部分参见uni-app快速入门。2.安装npm包，因为目前uni-app内置webpack版本是4，postcss版本是7，我们需要安装postcss7-compat版本的tailwindcss：yarnadd-Dweapp-tailwindcss-webpack-pluginpostcss-rem-to-responsive-pixeltailwindcss@npm:@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9postcss-rem-to-responsive-pixel是作者写的postcss插件，支持rem->rpx，同时支持postcss7和postcss8，配置见这里3.初始化tailwind.config.js和postcss.config.js只需要在初始化文件中添加一些配置//tailwind.config.js基本配置没有任何预设//https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/tailwind.config.js/**@type{import('@types/tailwindcss/tailwind-config').TailwindConfig}*/module.exports={mode:'jit',purge:{content:['./src/**/*.{vue,js,ts,jsx,tsx,wxml}']},corePlugins:{preflight:false}}//postcss.config.js参考示例//https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/postcss.config.jsconstpath=require('path')module.exports={解析器：require('postcss-comment')，插件：[require('postcss-import')({resolve(id,basedir,importOptions){if(id.startsWith('~@/')){returnpath.resolve(process.env.UNI_INPUT_DIR,id.substr(3))}elseif(id.startsWith('@/')){returnpath.resolve(process.env.UNI_INPUT_DIR,id.substr(2))}elseif(id.startsWith('/')&&!id.startsWith('//')){returnpath.resolve(process.env.UNI_INPUT_DIR,id.substr(1))}returnid}}),require('autoprefixer')({remove:process.env.UNI_PLATFORM!=='h5'}),//#region添加的部分开始//tailwindcssforpostcss7require('tailwindcss')({config:'./tailwind.config.js'}),//rem转rpxrequire('postcss-rem-to-responsive-pixel/postcss7')({rootValue:32,propList:['*'],transformUnit:'rpx'}),//#endregion添加的部分Endrequire('@dcloudio/vue-cli-plugin-uni/packages/postcss')]}4.设置环境变量Add.envSetTAILWIND_MODE#https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/.env#jitmodeHMRTAILWIND_MODE=watch这个是为了兼容tailwindcssv2的HMR方案。如果您使用的是tailwindcssv3，则不需要它5.src/App.vue中的引用：/*每个页面通用的css*///需要安装scssyarnadd-Dsasssass-loader@^10//applet需要'base'来注入变量，但不是htmlpreflight//@tailwindbase;//@tailwindutilities;@import'tailwindcss/base';@import'tailwindcss/utilities';6.添加vue.config.js//vue.config.jsconst{UniAppWeappTailwindcssWebpackPluginV4}=require('weapp-tailwindcss-webpack-plugin')/***@type{import('@vue/cli-service').ProjectOptions}*/constconfig={//....configureWebpack:{plugins:[newUniAppWeappTailwindcssWebpackPluginV4()]}//....}module.exports=config现在你可以在uni-app中使用jit的大部分功能了！jitexamplevue/wxmlbg-[#fafa00]bg-[#098765]p-[20px]-mt-2mb-[-20px]margin的jit不能这样写-m-[20px]w-[300rpx]text-blacktext-opacity-[0.19]min-w-[300rpx]max-h-[100px]text-[20px]leading-[0.9]max-w-[300rpx]min-h-[100px]text-[#dddddd]你好border-[10px]border-[#098765]border-solidborder-opacity-[0.44]123或@applyworld.hello{@applyflexitems-centerjustify-centerh-[100px]w-[100px]rounded-[40px]bg-[#123456]bg-opacity-[0.54]text-[#ffffff]#{!important};}了解更多以上只是一个简单的helloworld。如果想了解更多，可以去Github。欢迎来到star/forkBugs&Issues。如果您在使用过程中遇到Bug或有疑问，请在此提交。作者将尽快转载和修改。
