Taro集成Tailwind

使用weapp-tailwindcss插件，可以让 Tailwind在Taro中正常工作。

安装步骤

1

Step 1: 安装weapp-tailwindcss插件

npm install -D weapp-tailwindcss
2

Step 2: 配置项目脚本

在 package.json 中添加以下脚本：

//package.json
{
  "scripts": {
    "postinstall": "weapp-tw patch"
  }
}

这个脚本确保在每次安装包后应用必要的补丁。

3

Step 3: 配置Taro项目

在 config/index.js 中添加插件配置：

//config/index.js
import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack';
const config = {
  // ... 其他配置
  mini: {
    webpackChain(chain) {
      chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [
              {
                appType: 'taro',
                // 注意这一行(不传默认 react)
                framework: 'react', // 'vue2' / 'vue3'
                cssPreflightRange: 'all',
                customAttributes: {
                  // 通配符，代表所有的标签都生效；带 class 或者 Class 的 props 都会生效
                  '*': [/[A-Za-z]?[A-Za-z-]*[Cc]lass/],
                },
                mangle: process.env.NODE_ENV === 'production',
                injectAdditionalCssVarScope: true,
                disabled: isWeappTailwindcssDisabled,
                rem2rpx: {
                  rootValue: 32,
                  propList: ['*'],
                  transformUnit: 'rpx',
                },
              },
            ],
          },
        },
      });
    },//end...
  },
}