📦 build(webpack): 集成 weapp-tailwindcss 和 tailwindcss 支持

- 添加 weapp-tailwindcss/webpack 插件配置，支持 taro 应用类型
- 新增 tailwindcss 配置文件，禁用 preflight 避免样式冲突
- 创建 postcss 配置集成 autoprefixer 和 tailwindcss
- 更新 package.json 添加 weapp-tailwindcss、tailwindcss、autoprefixer 依赖
- 添加 postinstall 脚本自动执行 weapp-tw patch
- 在全局样式中引入 tailwindcss 基础样式

mini/config/index.ts

@@ -1,5 +1,6 @@
 import { defineConfig, type UserConfigExport } from '@tarojs/cli'
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack'
 import devConfig from './dev'
 import prodConfig from './prod'
 
@@ -51,6 +52,10 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
       },
       webpackChain(chain) {
         chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
+        chain.plugin('weapp-tailwindcss').use(UnifiedWebpackPluginV5, [{
+          appType: 'taro',
+          rem2rpx: true
+        }])
       }
     },
     h5: {

mini/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "prepare": "husky",
+    "postinstall": "weapp-tw patch",
     "new": "taro new",
     "build:weapp": "taro build --type weapp",
     "build:swan": "taro build --type swan",
@@ -47,49 +48,52 @@
     "@babel/runtime": "^7.24.4",
     "@tarojs/components": "4.1.4",
     "@tarojs/helper": "4.1.4",
-    "@tarojs/plugin-platform-weapp": "4.1.4",
+    "@tarojs/plugin-framework-react": "4.1.4",
     "@tarojs/plugin-platform-alipay": "4.1.4",
-    "@tarojs/plugin-platform-tt": "4.1.4",
-    "@tarojs/plugin-platform-swan": "4.1.4",
-    "@tarojs/plugin-platform-jd": "4.1.4",
-    "@tarojs/plugin-platform-qq": "4.1.4",
     "@tarojs/plugin-platform-h5": "4.1.4",
     "@tarojs/plugin-platform-harmony-hybrid": "4.1.4",
+    "@tarojs/plugin-platform-jd": "4.1.4",
+    "@tarojs/plugin-platform-qq": "4.1.4",
+    "@tarojs/plugin-platform-swan": "4.1.4",
+    "@tarojs/plugin-platform-tt": "4.1.4",
+    "@tarojs/plugin-platform-weapp": "4.1.4",
+    "@tarojs/react": "4.1.4",
     "@tarojs/runtime": "4.1.4",
     "@tarojs/shared": "4.1.4",
     "@tarojs/taro": "4.1.4",
-    "@tarojs/plugin-framework-react": "4.1.4",
-    "@tarojs/react": "4.1.4",
-    "react-dom": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@tarojs/plugin-generator": "4.1.4",
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-transform-class-properties": "7.25.9",
+    "@babel/preset-react": "^7.24.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "lint-staged": "^16.1.2",
-    "husky": "^9.1.7",
-    "stylelint-config-standard": "^38.0.0",
-    "@babel/core": "^7.24.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "4.1.4",
-    "@babel/plugin-transform-class-properties": "7.25.9",
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^18.0.0",
-    "webpack": "5.91.0",
+    "@tarojs/plugin-generator": "4.1.4",
     "@tarojs/taro-loader": "4.1.4",
     "@tarojs/webpack5-runner": "4.1.4",
+    "@types/node": "^18",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "autoprefixer": "^10.4.21",
     "babel-preset-taro": "4.1.4",
-    "eslint-config-taro": "4.1.4",
     "eslint": "^8.57.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.14.0",
-    "@babel/preset-react": "^7.24.1",
+    "eslint-config-taro": "4.1.4",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "postcss": "^8.4.38",
+    "react-refresh": "^0.14.0",
     "stylelint": "^16.4.0",
-    "typescript": "^5.4.5",
+    "stylelint-config-standard": "^38.0.0",
+    "tailwindcss": "^4.1.11",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "postcss": "^8.4.38",
-    "@types/node": "^18"
+    "typescript": "^5.4.5",
+    "weapp-tailwindcss": "^4.2.0",
+    "webpack": "5.91.0"
   }
 }

mini/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

mini/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

mini/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './public/index.html',
+    './src/**/*.{html,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+}