在 TaroJS 应用中使用 Tailwind CSS

安装与配置 Tailwind CSS

使用 pnpm 安装 Tailwind CSS 及相关依赖：

pnpm install -D tailwindcss postcss autoprefixer

初始化 tailwind.config.js 文件：
```
npx tailwindcss init
```

创建 postcss.config.js 并注册 Tailwind CSS 插件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

配置 tailwind.config.js 文件：

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

在项目入口文件中引入 Tailwind CSS：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

配置 rem 单位转化

安装 postcss-rem-to-responsive-pixel 插件：
```
pnpm i -D postcss-rem-to-responsive-pixel
```

配置 postcss.config.js 文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-rem-to-responsive-pixel': {
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx',
    },
  },
}

安装和配置 weapp-tailwindcss

安装 weapp-tailwindcss 插件：

pnpm i -D weapp-tailwindcss
npx weapp-tw patch

在 package.json 的 scripts 字段中添加以下脚本：

"scripts": {
  "postinstall": "weapp-tw patch"
}

在项目配置文件 config/index.js 中注册插件：

const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');

module.exports = {
  mini: {
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{ appType: 'taro' }],
          },
        },
      });
    },
  },
};

和 NutUI 一起使用

修改 config/index.js 文件，配置 @tarojs/plugin-html 插件：

module.exports = {
  mini: {
    postcss: {
      htmltransform: {
        enable: true,
        config: {
          removeCursorStyle: false,
        },
      },
    },
  },
};

示例代码

在项目中编写模板：

<View className="text-[#acc855] text-[100px]">Hello world!</View>

使用以下命令启动开发服务器：