在HBuildex创建的uniapp项目中使用tailwindcss，以及踩过的坑。

本文参考了 Hbuilder创建的uniapp工程，使用tailwindcss最优雅的方式 - DCloud问答以及用HbuilderX创建的uniapp项目中，使用tailwindcss

详细步骤如下

第一步: 安装tailwindcss

npm install tailwindcss -D

第二步: 创建输入css文件

在根目录创建 tailwind-input.css，引入tailwindcss

 /* #ifndef H5 */
/* 非 H5 环境（如小程序）不引入 tailwind base 样式 */
/* @tailwind base; */
/* #endif */
@tailwind components;  
@tailwind utilities;

第三步: 配置tailwindcss

在根目录创建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: ['./index.html', './pages/**/*.{vue,js,html}'],
	theme: {
		extend: {
			colors: {
				primary: '#ff0000'
			},
			fontSize: {
				'xs': '24rpx',
				'sm': '26rpx',
				'base': '28rpx',
				'lg': '30rpx',
				'xl': '32rpx',
				'2xl': '34rpx',
				'3xl': '38rpx',
				'4xl': '40rpx',
				'5xl': '44rpx'
			},
			spacing(config) {
				let result = { 0: '0' }
				// 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包  
				for (let i = 1; i <= 750; i++) {
					result[i] = `${i}rpx`
				}
				return result
			},
		}
	},
	plugins: [],
}

第四步在package.json中的scripts下写入以下两行命令

注意：项目中没有package.json文件的可以在根目录手动创建或者执行npm init -y

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

第五步在项目根目录创建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()],  
});

第六步在app.vue中引入

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

至此，大功告成，你可以在你的项目中使用tailwindcss的样式了！

踩过的坑

如果你遇到了这类报错：The following dependencies are imported but could not be resolved: 10:01:27.842 vue (imported by C:/Users/windows/Desktop/tailwind-demo/main.js) 10:01:27.842 Are they installed?

根目录执行 npm install vue -D 或者 yarn add vue 即可

注意：tailwindcss的样式权重比页面中自己定义css样式低，所以如果出现样式没生效的情况，请检查是否被自己写的样式覆盖了。