一、引入weapp-tailwindcss

首先安装本插件前，我们需要把 tailwindcss 对应的环境和配置安装好。

1、安装tailwindcss

1、安装

# 使用你喜欢的任意 npm / yarn / pnpm 
npm install -D tailwindcss postcss autoprefixer
# 初始化 tailwind.config.js 文件
npx tailwindcss init

2、在项目根目录下创建 postcss.config.js并注册 tailwindcss

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    // 假如框架已经内置了 `autoprefixer`，可以去除下一行
    autoprefixer: {},
  }
}

3、配置tailwindcss.config.js

module.exports = {
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false
  }
}

4、全局引入tailwindcss

在App.vue组件中引用

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 使用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
/* @import 'tailwindcss/components'; */
</style>

接下来安装weapp-tailwindcss插件

2、安装weapp-tailwindcss插件

1、安装

# npm / yarn /pnpm
npm i -D weapp-tailwindcss
# 可以执行一下 patch 方法
npx weapp-tw patch

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

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

2、配置

// vite.config.[jt]s
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite';

export default defineConfig({
  // uni 是 uni-app 官方插件， uvtw 一定要放在 uni 后，对生成文件进行处理
  plugins: [uni(),uvwt()],
  css: {
    postcss: {
      plugins: [
        // require('tailwindcss')() 和 require('tailwindcss') 等价的，表示什么参数都不传，如果你想传入参数
        // require('tailwindcss')({} <- 这个是postcss插件参数)
        require('tailwindcss'),
        require('autoprefixer')
      ],
    },
  },
});

3、运行

配置成功！！！