refactor: tailwindcss 替换 unocss

.npmrc

@@ -2,5 +2,5 @@
 # 提示:如果你不希望pnpm在对等依赖问题上失败，在项目根目录下的.npmrc文件中添加"strict-peer-dependencies=false"。
 # auto-install-peers=true
 strict-peer-dependencies=false
-# registry=https://registry.npmmirror.com
+registry=https://registry.npmmirror.com
-registry=https://registry.npmjs.org
+# registry=https://registry.npmjs.org

build/platform.ts

@@ -0,0 +1,15 @@
+import process from 'node:process';
+
+const currentPlatform = process.env.UNI_PLATFORM;
+const isH5 = currentPlatform === 'h5';
+const isApp = currentPlatform === 'app';
+const WeappTailwindcssDisabled = isH5 || isApp;
+const isMp = !isH5 && !isApp;
+
+export {
+  isH5,
+  isApp,
+  WeappTailwindcssDisabled,
+  isMp,
+  currentPlatform,
+};

build/vitePlugins.ts

@@ -0,0 +1,57 @@
+import type { PluginOption } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite';
+import autoImport from 'unplugin-auto-import/vite';
+import viteRestart from 'vite-plugin-restart';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { WeappTailwindcssDisabled, isH5 } from './platform';
+
+interface VitePluginConfig {
+  isProd: boolean
+}
+
+export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[] {
+  return [
+    // @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
+    uni?.default(),
+    uvtw({
+      rem2rpx: true,
+      disabled: WeappTailwindcssDisabled,
+      // 使用新的 ast-grep 来处理 js 资源，速度是 babel 的2倍左右
+      // 需要先安装 `@ast-grep/napi`
+      // jsAstTool: 'ast-grep'
+    }),
+    autoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/,
+        /\.vue\?vue/, // .vue
+      ],
+      imports: [
+        'vue',
+        'uni-app',
+        'pinia',
+        {
+          'uni-mini-router': ['useRouter', 'useRoute'],
+        },
+        {
+          alova: ['useRequest'],
+        },
+      ],
+      dts: 'typings/auto-imports.d.ts',
+      eslintrc: {
+        enabled: true,
+      },
+    }),
+    viteRestart({
+      restart: ['vite.config.ts', 'src/pages.json'],
+    }),
+    isH5 && isProd
+    && visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ];
+}

eslint.config.js

@@ -12,7 +12,6 @@ export default antfu(
     formatters: true,
     vue: true,
     jsx: true,
-    unocss: true,
     env: {
       node: true,
     },

package.json

@@ -32,7 +32,8 @@
     "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
     "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
     "lint:fix": "eslint . --fix",
-    "git:hooks": "npx simple-git-hooks"
+    "git:hooks": "npx simple-git-hooks",
+    "postinstall": "weapp-tw patch"
   },
   "dependencies": {
     "@alova/adapter-uniapp": "^1.2.2",
@@ -69,27 +70,27 @@
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.16.1",
-    "@unocss/eslint-plugin": "^0.61.9",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/runtime-core": "^3.4.38",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-format": "^0.1.2",
     "globals": "^15.9.0",
     "lint-staged": "^15.2.9",
     "picocolors": "^1.0.1",
+    "postcss": "^8.4.41",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
+    "tailwindcss": "^3.4.10",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4",
     "uni-mini-router": "^0.1.6",
     "uni-read-pages-vite": "^0.0.6",
-    "unocss": "^0.62.2",
-    "unocss-preset-weapp": "^0.62.0",
     "unplugin-auto-import": "^0.18.2",
-    "unplugin-transform-class": "^0.5.3",
     "vite": "^5.4.1",
-    "vite-plugin-restart": "^0.4.1"
+    "vite-plugin-restart": "^0.4.1",
+    "weapp-tailwindcss": "^3.5.0"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged",

postcss.config.ts

@@ -0,0 +1,12 @@
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import type { AcceptedPlugin } from 'postcss';
+import cssMacro from 'weapp-tailwindcss/css-macro/postcss';
+
+const plugins: AcceptedPlugin[] = [tailwindcss(), autoprefixer()];
+
+// 可以使用 postcss-pxtransform 来进行 px 转 rpx 的功能
+
+plugins.push(cssMacro);
+
+export default plugins;

src/App.vue

@@ -16,4 +16,7 @@ onHide(() => {
 </script>
 
 <style lang="scss">
+@import 'tailwindcss/base';
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/components';
 </style>

src/main.ts

@@ -1,6 +1,5 @@
 import { createSSRApp } from 'vue';
 import App from './App.vue';
-import 'virtual:uno.css';
 import { setupRouter } from './router';
 import { setupStore } from './stores';
 

src/pages/demo/index.vue

@@ -5,7 +5,7 @@ const demo = ref('Demo');
 </script>
 
 <template>
-  <view class="pt-36 text-lg font-medium flex flex-col justify-center items-center">
+  <view class="flex flex-col items-center justify-center pt-36 text-lg font-medium">
     {{ demo }}
     <view class="mt-30px">
       iconify 组件

src/pages/index/index.vue

@@ -7,7 +7,7 @@ const appTitle = 'uniapp-vue3';
 </script>
 
 <template>
-  <view class="pt-36 flex flex-col gap-y-2 items-center">
+  <view class="flex flex-col items-center gap-y-2 pt-36">
     <image :src="logo" class="h-56 w-56" alt="" mode="widthFix" />
     <view class="text-xl font-semibold">
       {{ appTitle }}

src/pages/notFound/404.vue

@@ -19,7 +19,7 @@ function backHome() {
 </script>
 
 <template>
-  <view class="pt-320rpx flex flex-col w-screen items-center">
+  <view class="w-screen flex flex-col items-center pt-320rpx">
     <image class="w-360rpx" mode="widthFix" src="/static/svg/weep.svg" />
     <view class="mb-40rpx">
       <text>{{ go }} 页面找不到了~</text>

src/types/unplugin-transform-class-vite.d.ts

@@ -1,4 +0,0 @@
-declare module 'unplugin-transform-class/vite' {
-  const transformClassVitePlugin: any;
-  export default transformClassVitePlugin;
-}

tailwind.config.js

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

tsconfig.json

@@ -7,7 +7,7 @@
     /* 实验选项 */
     "experimentalDecorators": true,
     "baseUrl": "./", // 指定基目录以解析非相对模块名
-    "rootDir": "./src", // 编译出目标语言版本
+    "rootDir": ".", // 编译出目标语言版本
     "module": "ESNext", // 生成代码的模板标准
     "moduleResolution": "node", // 删除注释
     "paths": { "@/*": ["./src/*"] }, // 有错误时不进行编译

unocss.config.js

@@ -1,73 +0,0 @@
-/**
- * unocss defineConfig
- * @link unocss: https://github.com/unocss/unocss
- * @type {import('unocss').UserConfig}
- */
-
-import { defineConfig, presetIcons } from 'unocss';
-import presetWeapp from 'unocss-preset-weapp';
-import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
-
-const transformRules = {
-  '.': '-d2e-',
-  '/': '-s2f-',
-  ':': '-c3a-',
-  '%': '-p25-',
-  '!': '-e21-',
-  '#': '-w23-',
-  '(': '-b28-',
-  ')': '-b29-',
-  '[': '-f4b-',
-  ']': '-f5d-',
-  '$': '-r24-',
-  ',': '-r2c-',
-};
-
-const prefix = '';
-
-export default defineConfig({
-  presets: [
-    // https://github.com/MellowCo/unocss-preset-weapp
-    presetWeapp({
-      nonValuedAttribute: true,
-      prefix,
-      whRpx: true,
-      transform: true,
-      platform: 'uniapp',
-      transformRules,
-    }),
-    presetIcons({
-      scale: 1.2,
-      warn: true,
-    }),
-  ],
-  shortcuts: [
-    {
-      center: 'flex justify-center items-center',
-    },
-  ],
-  theme: {
-    colors: {
-      primary: '#007AFF',
-      secondary: '#4CD964',
-      danger: '#FF3B30',
-      warning: '#FF9500',
-      info: '#5AC8FA',
-      light: '#F0F0F0',
-      dark: '#1A1A1A',
-    },
-    fontSize: {
-      mini: ['20rpx', '26rpx'],
-    },
-  },
-  transformers: [
-    transformerAttributify({
-      classPrefix: prefix,
-      transformRules,
-      nonValuedAttribute: true,
-    }),
-    transformerClass({
-      transformRules,
-    }),
-  ],
-});

vite.config.ts

@@ -8,19 +8,14 @@ import process from 'node:process';
 import type { UserConfig } from 'vite';
 import { defineConfig, loadEnv } from 'vite';
 import TransformPages from 'uni-read-pages-vite';
-import uni from '@dcloudio/vite-plugin-uni';
+import postcssPlugins from './postcss.config';
-import UnoCSS from 'unocss/vite';
+import { createVitePlugins } from './build/vitePlugins';
-import transformClass from 'unplugin-transform-class/vite';
+import { currentPlatform } from './build/platform';
-import { visualizer } from 'rollup-plugin-visualizer';
-import ViteRestart from 'vite-plugin-restart';
-import AutoImport from 'unplugin-auto-import/vite';
 
 export default defineConfig(async ({ mode }) => {
   const root = process.cwd();
   const env = loadEnv(mode, resolve(root, 'env'));
   const isProd = mode === 'production';
-  const { UNI_PLATFORM } = process.env;
-  const isH5 = UNI_PLATFORM === 'h5';
   const { VITE_PROXY_PREFIX, VITE_UPLOAD_PROXY_PREFIX, VITE_BASE_URL, VITE_UPLOAD_URL, VITE_PORT } = env;
 
   return {
@@ -36,7 +31,7 @@ export default defineConfig(async ({ mode }) => {
     // 自定义全局变量
     define: {
       'process.env': {},
-      'PLATFORM': JSON.stringify(UNI_PLATFORM),
+      'PLATFORM': JSON.stringify(currentPlatform),
       'ROUTES': new TransformPages().routes,
     },
     css: {
@@ -45,45 +40,11 @@ export default defineConfig(async ({ mode }) => {
           additionalData: '@import "./src/uni.scss";',
         },
       },
+      postcss: {
+        plugins: postcssPlugins,
+      },
     },
-    plugins: [
+    plugins: createVitePlugins({ isProd }),
-      // @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
-      uni?.default(),
-      AutoImport({
-        include: [
-          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
-          /\.vue$/,
-          /\.vue\?vue/, // .vue
-        ],
-        imports: [
-          'vue',
-          'uni-app',
-          'pinia',
-          {
-            'uni-mini-router': ['useRouter', 'useRoute'],
-          },
-          {
-            alova: ['useRequest'],
-          },
-        ],
-        dts: 'typings/auto-imports.d.ts',
-        eslintrc: {
-          enabled: true,
-        },
-      }),
-      UnoCSS(),
-      transformClass(),
-      ViteRestart({
-        restart: ['vite.config.ts', 'src/pages.json'],
-      }),
-      isH5 && isProd
-      && visualizer({
-        filename: './node_modules/.cache/visualizer/stats.html',
-        open: true,
-        gzipSize: true,
-        brotliSize: true,
-      }),
-    ],
     // 开发服务器配置
     server: {
       host: true,