这可能是使用tailwindcss开发小程序的最佳解决方案这可能是使用tailwindcss开发小程序的最佳解决方案快速入门1、安装配置tailwindcss1。npm安装tailwindcss2。将tailwindcss注册到postcss.config.js3中。配置tailwind.config.js4。导入tailwindcss2。配置rem到rpx为什么要配置这一步？配置tailwindcss单位转换1.postcss-rem-to-responsive-pixel(推荐)2.tailwindcss-rem2px-preset3.安装这个插件taro(所有框架)uni-app(vue2/3)uni-appvite(vue3)更多框架！开始开发！作者对tailwindcss的理解比较到位，写过很多preset/plugins和很多postcss插件。这个月，我发布了weapp-tailwindcss-webpack-plugin的2.x版本。相比之前的版本，大大提升了我们开发者的开发体验，尤其是类jsx框架相关的体验。接下来，让我们快速上手吧！快速入门1.安装和配置tailwindcss1。npminstalltailwindcss#npm/yarn/pnpmnpminstall-Dtailwindcsspostcssautoprefixer#生成tailwind.config.js文件npxtailwindcssinit2.将tailwindcss注册到postcss.config.js中//创建postcss.config.js//如果你使用的框架/工具不支持postcss.config.js，你可以使用内联写module.exports={plugins:{tailwindcss:{},autoprefixer:{},}}3.Configuretailwind.config.js/**@type{import('tailwindcss').Config}*/module.exports={//这里是uni-app/taro的通用示例，根据自己的项目配置在directory//注意对于不符合contentglob语法的文件，不会生成工具类内容：['./public/index.html','./src/**/*.{html,js,ts,jsx,tsx,vue}'],//...otheroptionscorePlugins:{//不需要Preflight，因为preflight主要针对h5，小程序使用的特有标签导致preflight不起作用。//如果同时开发小程序和h5端，应该使用环境变量控制preflight:false}}4.引入tailwindcss在你的项目入口引入tailwindcss，比如App.vue或者太郎的app.scss@import'tailwindcss/base';@import'tailwindcss/utilities';然后在app.ts中引入Q&A：为什么没有引入tailwindcss/components？因为默认存储了PC端适配相关的样式。对于小程序环境没用。如果需要使用@layer组件相关的工具类，可以导入。2.配置rem为rpx。我们之前安装并配置了tailwindcss。下一步是将rem配置为rpx。为什么我们需要配置这一步？这是因为tailwindcss中工具的长度单位默认是rem，例如：.m-4{margin:1rem;}.h-4{height:1rem;}/*...*/这是h5环境适配的很好。但是在小程序中，我们大多数情况下使用rpx单位进行自适应，所以需要将默认的rem单位转换为rpx。配置tailwindcss单位转换为两种转换方式（二选一）。如果你想将项目中的所有rem转为rpx，那么postcss插件：postcss-rem-to-responsive-pixel适合你。如果你想缩小范围，只将tailwindcss生成的工具的单位从rem改为rpx，那么tailwindcsspreset：tailwindcss-rem2px-preset适合你。推荐第一种转换方式，将你编写的或者导入第三方控件的工程中的rem单位全部转换为rpx。当然，这个包也提供了各种配置项来帮助你进行更详细的操作。1.postcss-rem-to-responsive-pixel（推荐）首先我们安装它：npmi-Dpostcss-rem-to-responsive-pixel安装后，将它注册到你的postcss.config.js中：//postcss.config.jsmodule.exports={plugins:{tailwindcss:{},autoprefixer:{},'postcss-rem-to-responsive-pixel':{//转换单位可以改为px/rpxtransformUnit:'rpx',//32表示1rem=32rpxrootValue:32,//默认情况下所有属性都被转换propList:['*']},},};2.tailwindcss-rem2px-preset我们也安装它：npmi-Dtailwindcss-rem2px-preset然后在tailwind.config.js中，注册这个预设：//tailwind.config.jsmodule.exports={presets:[require('tailwindcss-rem2px-preset').createPreset({//32表示1rem=32rpxfontSize:32,//转换单位可以改为px/rpxunit:'rpx'})],//...}这个可以完成配置tailwindcssrpx默认工具类的rem转换。3.安装这个插件#npm/yarn/pnpmnpmi-Dweapp-tailwindcss-webpack-plugin#你可以执行补丁方法npxweapp-twpatch并在你的package.json的scripts字段中添加以下脚本："scripts":{+"postinstall":"weapp-twpatch"}接下来我们开始在不同的框架中进行注册。这里以市面上主流的taro和uni-app为例：taro（所有框架）使用Taro时，检查config/index文件const中config/index的配置项compiler是否设置为'webpack5'//{UnifiedWebpackPluginV5}=require('weapp-tailwindcss-webpack-plugin'){mini:{webpackChain(chain,webpack){chain.merge({plugin:{install:{plugin:UnifiedWebpackPluginV5,args:[{appType:'taro'}]}}})}}}uni-app(vue2/3)是在uni中创建的-使用app项目时，请选择uni-appalpha版本。这是因为默认创建的版本仍然使用@vue/cli4.x版本，它使用webpack4和postcss7，而alpha版本使用@vue/cli5.x。webpack5和postcss8，这适用于最新版本的tailwindcss。vuecreate-pdcloudio/uni-preset-vue#alphamy-alpha-project更多uni-app模板见quickstart-cli//在vue.config.js中注册const{UnifiedWebpackPluginV5}=require('weapp-tailwindcss-webpack-plugin')/***@type{import('@vue/cli-service').ProjectOptions}*/constconfig={//一些选项...configureWebpack:(config)=>{config.plugins.push(newUnifiedWebpackPluginV5({appType:'uni-app'}))}//其他选项...}module.exports=configuni-appvite(vue3)uni-appvue3/Vite版本是当前的uni-app最新版本，使用vite进行打包开发，我们也可以注册如下：//vite.config.[jt]simport{UnifiedViteWeappTailwindcssPluginasuvwt}from'weapp-tailwindcss-webpack-plugin/vite'//uvwt()放置在uni官方插件之后constvitePlugins=[uni(),uvwt()]exportdefaultdefineConfig({plugins:vitePlugins,//如果postcss.config.js不行，使用inlinepostcssLatset//css:{//postcss:{//插件:postcssPlugins,//},//},});更多框架！支持更多的框架类型，可以查看文档地址。开始开发！通过这三步，我们就完成了在小程序中使用tailwindcss的步骤！你可以马上启动项目，在你的模板文件或js文件中使用任意一个工具类，它会实时生成相应的css类并应用到dom中。如果你在使用过程中遇到问题，可以去https://weapp-tw.icebreaker.top/搜索，或者加入微信技术交流群一起讨论前端技术！
