宁波市江北区建设局网站,ppt电子商务网站建设,杭州网站做的好公司名称,如何做网站的301重定向weapp-tailwindcss for uni-app 样式条件编译语法插件 版本需求 2.10.0 weapp-tailwindcss for uni-app 样式条件编译语法插件 这是什么玩意?如何使用 tailwind.config.js 注册postcss 插件注册 uni-app vite vue3uni-app vue2 配置完成 配置项 这是什么玩意? 在 uni-app … weapp-tailwindcss for uni-app 样式条件编译语法插件 版本需求 2.10.0 weapp-tailwindcss for uni-app 样式条件编译语法插件 这是什么玩意?如何使用 tailwind.config.js 注册postcss 插件注册 uni-app vite vue3uni-app vue2 配置完成 配置项 这是什么玩意? 在 uni-app 里存在一种类似宏指令的样式条件编译写法: /* #ifdef %PLATFORM% */ 平台特有样式 /* #endif */uni-app %PLATFORM% 的所有取值可以参考这个链接 在 weapp-tailwindcss2.10.0 版本中内置了一个 css-macro 功能可以让你的 tailwindcss 自动生成带有条件编译的样式代码来辅助你进行多平台的适配开发效果类似如下方式: !-- 默认 -- view classifdef-[H5||MP-WEIXIN]:bg-blue-400Web和微信小程序平台蓝色背景/view view classifndef-[MP-WEIXIN]:bg-red-500非MP-WEIXIN平台红色背景/view view classifdef-[MP-WEIXIN]:bg-blue-500 ifndef-[MP-WEIXIN]:bg-red-500微信小程序为蓝色不是微信小程序为红色view !-- 自定义 -- view classwx:bg-blue-400 -wx:bg-red-400微信小程序为蓝色不是微信小程序为红色/view view classtt:bg-blue-400头条小程序蓝色/view或者这样的条件样式代码: /*只在 H5 和 MP-WEIXIN, 背景为蓝色否则为红色 */ .apply-test-0 {apply ifdef-[H5||MP-WEIXIN]:bg-blue-400 ifndef-[H5||MP-WEIXIN]:bg-red-400; } /* 自定义 */ .apply-test-1 {apply mv:bg-blue-400 -mv:bg-red-400 wx:text-blue-400 -wx:text-red-400; }让我们看看如何使用吧 如何使用 这里需要同时配置 tailwindcss 和 postcss 的配置文件才能起作用其中 tailwindcss 配置修改的方式大体类似 uni-app vue2/3 postcss插件的注册方式有些许不同: tailwind.config.js 注册 首先在你的 tailwind.config.js 注册插件 cssMacro: const cssMacro require(weapp-tailwindcss/css-macro); /** type {import(tailwindcss).Config} */ module.exports {// ...plugins: [/* 这里可以传入配置项默认只包括 ifdef 和 ifndef */cssMacro(),], };postcss 插件注册 对应的 postcss 插件位置为 weapp-tailwindcss/css-macro/postcss 值得注意的是你必须把这个插件注册在 tailwindcss 之后和 dcloudio/vue-cli-plugin-uni/packages/postcss 之前。 dcloudio/vue-cli-plugin-uni/packages/postcss 为 vue2 cli项目特有vue3不用管。 注册在 tailwindcss 之后很好理解我们在针对 tailwindcss 的产物做修改自然要在它执行之后处理注册在 dcloudio/vue-cli-plugin-uni/packages/postcss 之前则是因为 uni-app 样式的条件编译靠的就是它。假如在它之后去处理不久已经太晚了嘛。 这里提一下 postcss 插件的执行顺序假如注册是数组那就是按照顺序执行如果是对象那就是从上往下执行详见官方文档 uni-app vite vue3 // vite.config.ts 文件 import { defineConfig } from vite; // postcss 插件配置 const postcssPlugins [require(autoprefixer)(), require(tailwindcss)()]; // ... 其他省略postcssPlugins.push(require(weapp-tailwindcss/css-macro/postcss)); // https://vitejs.dev/config/ export default defineConfig({plugins: vitePlugins,css: {postcss: {plugins: postcssPlugins,},}, });可以参考这个项目的配置 demo/uni-app-vue3-vite uni-app vue2 vue2 cli 项目默认会带一个 postcss.config.js 我们之间直接在里面注册即可: const webpack require(webpack) const config {parser: require(postcss-comment),plugins: [// ...require(tailwindcss)({ config: ./tailwind.config.js }),// ...require(weapp-tailwindcss/css-macro/postcss),require(autoprefixer)({remove: process.env.UNI_PLATFORM ! h5}),// 注意在 tailwindcss 之后和 这个之前require(dcloudio/vue-cli-plugin-uni/packages/postcss)] } if (webpack.version[0] 4) {delete config.parser } module.exports config可以参考这个项目的配置 demo/uni-app 配置完成 现在配置好了这2个地方目前你就可以直接使用 ifdef 和 ifndef 的条件编译写法了 !-- 默认 -- view classifdef-[H5||MP-WEIXIN]:bg-blue-400Web和微信小程序平台蓝色背景/view view classifndef-[MP-WEIXIN]:bg-red-500非MP-WEIXIN平台红色背景/view view classifdef-[MP-WEIXIN]:bg-blue-500 ifndef-[MP-WEIXIN]:bg-red-500微信小程序为蓝色不是微信小程序为红色view !-- 自定义 -- view classwx:bg-blue-400 -wx:bg-red-400微信小程序为蓝色不是微信小程序为红色/view view classtt:bg-blue-400头条小程序蓝色/view不过你肯定会觉得这种默认写法很烦要写很多不要紧我还为你提供了自定义的方式接下来来看看配置项吧 配置项 这里提供了一份示例 uni-app %PLATFORM% 的所有取值可以参考这个链接 const cssMacro require(weapp-tailwindcss/css-macro); /** type {import(tailwindcss).Config} */ module.exports {// ...plugins: [/* 这里可以传入配置项默认只包括 ifdef 和 ifndef */cssMacro({// 是否包含 ifdef 和 ifndef默认为 true// dynamic: true,// 传入一个 variantsMapvariantsMap: {// wx 对应的 %PLATFORM% 为 MP-WEIXIN// 有了这个配置你就可以使用 wx:bg-red-300wx: MP-WEIXIN,// -wx语义上为非微信// 那就传入一个 obj 把 negative 设置为 true // 就会编译出 ifndef 的指令// 有了这个配置你就可以使用 -wx:bg-red-300-wx: {value: MP-WEIXIN,negative: true},mv: {// 可以使用表达式value: H5 || MP-WEIXIN},-mv: {// 可以使用表达式value: H5 || MP-WEIXIN,negative: true}}}),], };完整文档链接 https://weapp-tw.icebreaker.top/docs/quick-start/uni-app-css-macro