对于我等非专业，刚接触前端的程序员来说，使用HBuilderX开发uniapp项目非常简单也很快速，没兴趣也不想再搞新的开发环境（太浪费时间）。

关于如何在uniapp项目(HBuilderX创建的项目)中使用tailwind, 一般能找到的uniapp+tailwind的文章，在HBuilderX创建的项目里都不能用。

唯一找到的最接近能用的环境搭建教程：

Hbuilder创建的uniapp工程，使用tailwindcss最优雅的方式 - DCloud问答

文章讲的非常详细，深入浅出，对于想快速搞定环境问题有很大的帮助。

实际操作下来，还是有两处小问题需要解决：

1. 执行npx tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css --watch  命令后， 一直提示ReBuilding... 

在评论区找到原因： 是文章中的 tailwind.config.js 代码写错了。

找到： for (let i = 1; i <= 300; i ) {  

改成：for (let i = 1; i <= 300; i++ ) {

2. 在main.js中添加： import "@/static/tailwind.css"， 整个项目的页面都变成空白了。

解决方案： 在App.vue中<style>标签下，

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

完整的操作步骤：

1.安装tailwindcss， 在项目根目录执行命令：

npm install tailwindcss @tailwindcss/cli -D

2. 项目根目录，创建tailwind-input.css

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

3. 在项目根目录，创建 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', './main.js', './App.vue', './pages/**/*.{vue,js}'],
	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: [],
} 

4. 在项目根目录的package.json添加代码（如果没有就手动创建）

{
    //原来的内容...

    //添加tailwindcss自动生成的脚本
    "scripts": {  
      "tailwind-dev": "tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css --watch",  
      "tailwind-build": "tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css"  
	}
}

5. 在根目录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(), 
	  ],
});

6. 在App.vue的style中导入生成的static/tailwind.css

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

7. 测试效果

在/pages下的任意找一个网页vue文件，添加一个文本标签

<text class='text-3xl font-bold underline'>我是宇宙之王</text>

点击菜单【运行】-【运行到浏览器】-【Edge】打开该网页

可以看到，tailwindcss的语法生效了。

tailwindcss样式参考（左侧菜单上半部分是些没用的环境教程，要往下拉一段，才能看到样式参考文档）：

Aspect Ratio - TailwindCSS中文文档 | TailwindCSS中文网