chore: update tailwind

config/index.ts

 import Components from 'unplugin-vue-components/webpack';
 import NutUIResolver from '@nutui/nutui-taro/dist/resolver';
-
+const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');
 const config = {
   projectName: 'testApp',
   date: '2024-1-31',
-  designWidth (input) {
+  designWidth(input) {
     if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
-      return 375
+      return 375;
     }
-    return 750
+    return 750;
   },
   deviceRatio: {
     640: 2.34 / 2,
     750: 1,
     828: 1.81 / 2,
-    375: 2 / 1
+    375: 2 / 1,
   },
   sourceRoot: 'src',
   outputRoot: 'dist',
   plugins: ['@tarojs/plugin-html'],
-  defineConstants: {
-  },
+  defineConstants: {},
   copy: {
-    patterns: [
-    ],
-    options: {
-    }
+    patterns: [],
+    options: {},
   },
   framework: 'vue3',
   compiler: {
     type: 'webpack5',
-    prebundle: { enable: false }
+    prebundle: { enable: false },
   },
-  sass:{
-    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
+  sass: {
+    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
   },
   mini: {
     webpackChain(chain) {
-      chain.plugin('unplugin-vue-components').use(Components({
-        resolvers: [NutUIResolver({taro: true})]
-      }))
+      chain.plugin('unplugin-vue-components').use(
+        Components({
+          resolvers: [NutUIResolver({ taro: true })],
+        })
+      );
+      chain.merge({
+        plugin: {
+          install: {
+            plugin: UnifiedWebpackPluginV5,
+            args: [
+              {
+                appType: 'taro',
+              },
+            ],
+          },
+        },
+      });
     },
     postcss: {
       pxtransform: {
         enable: true,
         config: {
           // selectorBlackList: ['nut-']
-        }
+        },
       },
       url: {
         enable: true,
         config: {
-          limit: 1024 // 设定转换尺寸上限
-        }
+          limit: 1024, // 设定转换尺寸上限
+        },
       },
       cssModules: {
         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
           namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: '[name]__[local]___[hash:base64:5]'
-        }
-      }
-    }
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
+        },
+      },
+      htmltransform: {
+        enable: true,
+        // 设置成 false 表示 不去除 * 相关的选择器区块
+        // 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉
+        config: {
+          removeCursorStyle: false,
+        },
+      },
+    },
   },
   h5: {
     webpackChain(chain) {
-      chain.plugin('unplugin-vue-components').use(Components({
-        resolvers: [NutUIResolver({taro: true})]
-      }))
+      chain.plugin('unplugin-vue-components').use(
+        Components({
+          resolvers: [NutUIResolver({ taro: true })],
+        })
+      );
     },
     publicPath: '/',
     staticDirectory: 'static',
@@ -75,23 +96,22 @@ const config = {
     postcss: {
       autoprefixer: {
         enable: true,
-        config: {
-        }
+        config: {},
       },
       cssModules: {
         enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
           namingPattern: 'module', // 转换模式，取值为 global/module
-          generateScopedName: '[name]__[local]___[hash:base64:5]'
-        }
-      }
-    }
-  }
-}
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
+        },
+      },
+    },
+  },
+};
 
 module.exports = function (merge) {
   if (process.env.NODE_ENV === 'development') {
-    return merge({}, config, require('./dev'))
+    return merge({}, config, require('./dev'));
   }
-  return merge({}, config, require('./prod'))
-}
+  return merge({}, config, require('./prod'));
+};

package.json

@@ -10,6 +10,7 @@
 		"framework": "Vue3"
 	},
 	"scripts": {
+		"postinstall": "weapp-tw patch",
 		"build:weapp": "taro build --type weapp",
 		"build:swan": "taro build --type swan",
 		"build:alipay": "taro build --type alipay",
@@ -53,7 +54,8 @@
 		"@tarojs/runtime": "3.6.23",
 		"@tarojs/shared": "3.6.23",
 		"@tarojs/taro": "3.6.23",
-    "vue": "^3.2.40"
+		"vue": "^3.2.40",
+		"weapp-tailwindcss": "^3.0.8"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.8.0",
@@ -66,13 +68,17 @@
 		"@typescript-eslint/parser": "^5.20.0",
 		"@vue/babel-plugin-jsx": "^1.0.6",
 		"@vue/compiler-sfc": "^3.2.40",
+		"autoprefixer": "^10.4.17",
 		"babel-preset-taro": "3.6.23",
 		"css-loader": "3.4.2",
 		"eslint": "^8.12.0",
 		"eslint-config-taro": "3.6.23",
 		"eslint-plugin-vue": "^8.0.0",
+		"postcss": "^8.4.33",
+		"postcss-rem-to-responsive-pixel": "^6.0.1",
 		"style-loader": "1.3.0",
 		"stylelint": "9.3.0",
+		"tailwindcss": "^3.4.1",
 		"ts-node": "^10.9.1",
 		"typescript": "^4.1.0",
 		"unplugin-vue-components": "^0.23.0",

postcss.config.js

+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+		'postcss-rem-to-responsive-pixel': {
+			// 32 意味着 1rem = 32rpx
+			rootValue: 16,
+			// 默认所有属性都转化
+			propList: ['*'],
+			// 转化的单位,可以变成 px / rpx
+			transformUnit: 'px',
+		},
+	},
+}
+

src/app.styl

+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
\ No newline at end of file

src/pages/index/index.vue

 <template>
-  <view class="index">
+  <view class="index text-gray-400">
     <view>
-      <img src="" alt="">
+      <img src="" alt="" />
     </view>
-    {{ msg }} <Dongdong />
+    <view class="index text-gray-400"> {{ msg }} <Dongdong /> </view>
     <view class="btn">
-      <nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
+      <nut-button type="primary" @click="handleClick('text', msg2, true)"
+        >点我</nut-button
+      >
     </view>
-    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/>
+    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
   </view>
 </template>
 
@@ -17,7 +19,7 @@ import { Dongdong } from '@nutui/icons-vue-taro';
 export default {
   name: 'Index',
   components: {
-    Dongdong
+    Dongdong,
   },
   setup() {
     const state = reactive({
@@ -25,7 +27,7 @@ export default {
       msg2: '你成功了～',
       type: 'text',
       show: false,
-      cover: false
+      cover: false,
     });
 
     const handleClick = (type, msg, cover = false) => {
@@ -37,15 +39,15 @@ export default {
 
     return {
       ...toRefs(state),
-      handleClick
-    }
-  }
-}
+      handleClick,
+    };
+  },
+};
 </script>
 
 <style lang="scss">
 .index {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+const range = (size) =>
+	Object.fromEntries(
+		[...Array(size).keys()]
+			.slice(1)
+			.map((i) => [`${i}_${size}`, `${(i / size) * 100}%`])
+	);
+
+module.exports = {
+	// 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
+	// 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
+	// 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
+	content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
+	// 其他配置项 ...
+	corePlugins: {
+		// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
+		preflight: false,
+	},
+}
\ No newline at end of file