1.安装tailwindcss

pnpm install tailwindcss -D

2.根目录创建 tailwind-input.css 并写入以下内容

/* 如果是小程序的话，这一行注释掉，因为tailwind base模块提供的一些样式选择器是基于*，这在小程序中会报错 */  
/* @tailwind base; */
@tailwind components;
@tailwind utilities;

3.修改App.vue引入tailwind.css

<style>
    /*每个页面公共css */
    @import "@/static/tailwind.css";
</style>

4.在根目录创建 tailwind.config.js 并写入以下内容

/** @type {import('tailwindcss').Config} */
module.exports = {
    separator: '__', // 如果是小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500  
    corePlugins: {
        // 预设样式  
        preflight: false, // 一般uniapp都有预设样式，所以不需要tailwindcss的预设  

        // 以下功能小程序不支持  
        space: false, // > 子节点选择器  
        divideWidth: false,
        divideColor: false,
        divideStyle: false,
        divideOpacity: false,
    },

    // 指定要处理的文件  
    content: [
        './pages/**/*.{vue,js}',
        './main.js',
        './App.vue',
        './index.html'
    ],
    theme: {
        // 字号，使用 App.vue 中的 --x-font-size 样式变量配置  
        fontSize(config) {
            const list = ['2xs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl'];
            let result = {}
            list.forEach(it => {
                result[it] = `var(--x-font-size-${it})`
            })
            return result
        },
        extend: {
            // 间距，tailwindcss中默认间距是rem单位，可以统一设置为uniapp的rpx单位。  
            // 类似的设置根据项目需求自己调整一下就好了，没必要去安装别人的预设，其实主要是小程序不兼容的css比较多，H5和App基本都直接兼容tailwindcss默认的预设  
            spacing(config) {
                let result = {
                    0: '0'
                }
                // 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包  
                for (let i = 1; i <= 300; i++) {
                    result[i] = `${i}rpx`
                }
                return result
            },
            // 增加颜色板，现在主流UI组件库大都是采用css变量实现定制主题，所以这里引用了全局的css变量，这个css变量的定义位置可以在 App.vue 中 page{} 选择器下  
            // 其实tailwindcss只是一个css工具，不必局限于它内部提供的东西，灵活运用css变量这些特性完全可以整合出自己的生产力工具  
            colors: {
                'primary': 'var(--x-color-primary)',
                'tips': 'var(--x-color-tips)'
            },
        },
    },
    plugins: [],
}

5.修改 package.json 添加scripts

"scripts": {
        "tailwind-dev": "tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css --watch",
        "tailwind-build": "tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css"
    },

6.添加 vite.config.js

// vite.config.js  
import { defineConfig } from 'vite';  
import uni from '@dcloudio/vite-plugin-uni';  
  
/** ==== 处理 tailwind cli 的自动启动和打包 ==== */  
const child_process = require('child_process')  
let tailwindMode = process.env.NODE_ENV  
  
// 主进程输出  
console.log(`[tailwindcss] 开始${tailwindMode == 'production' ? '生产环境打包' : '开发模式监听'}`);  
child_process.exec(  
    // 这里指令对应 package.json 中的 npm scripts  
    tailwindMode == 'production'  
        ? 'npm run tailwind-build'  
        : 'npm run tailwind-dev',  
    {  
        cwd: __dirname, // 切换目录到当前项目，必须  
    },  
    (error, stdout, stderr) => {  
        // tailwind --watch 是一个持久进程，不会立即执行回调  
        // process.stdout.write('tailwind success')  
        if (error) {  
            console.error('[tailwindcss] 异常，请检查');  
            console.error(error);  
            console.error(stdout);  
            console.error(stderr);  
        }  
        if(tailwindMode == 'production'){  
            console.log('[tailwindcss] 生产环境打包完成');  
        }  
    })  
  
export default defineConfig({  
    plugins: [uni()],  
});