taro配置使用tailwind

安装

在 Taro 项目根目录下安装
npm i taro-plugin-tailwind --save

使用

引入插件

请确保 Taro CLI 已升级至 Taro 3 的最新版本，确保 taro-plugin-tailwind 版本在 v1.1.0 及以上。
修改项目 config/index.js 中的 plugins 配置如下：

const config = {
    /// ...
    plugins: [
        // ...其余插件
        'taro-plugin-tailwind',
    ],
    /// ...
    /// 亦或是传入具体参数：
    plugins: [
        // ...其余插件
        ['taro-plugin-tailwind', {
            scan: {
                dirs: ['./src'], // 只扫描 src 目录下的文件
                exclude: ['dist/**/*'], // 排除 dist 目录
            },
            // 具体参数见：https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts#L10
        }]
    ],
};

生成配置

执行 taro tailwind --init 生成必要的配置文件：

1. taro tailwind --init // 默认生成 mini, h5 两种配置文件且必须存在
2. taro tailwind --init weapp,tt,swan // 生成其它平台以 (,) 分隔

在项目入口文件（如 main.js / app.tsx）引入 windi.css：
import 'windi.css';

安装并使用Tailwind CSS IntelliSense

1. vscode安装Tailwind CSS IntelliSense插件
2. 项目目录下存在 tailwind.config.js / tailwind.js 文件
3. npm i postcss postcss-import tailwindcss
4. 在vscode首选项设置加上
   //css 或scss里面 使用at-rule规则 不再警告
   “css.validate”: false,
   “scss.validate”: false,