[失败记录] 使用HBuilderX创建的uniapp vue3项目添加tailwindcss3的完整过程

写在前面

放弃了。。。

1）方案1 - 参考下面的"完整步骤 " - ++安装成功，运行成功++，但是！好多class不生效！

2）方案2 - 不安装tailwindcss，直接使用独立的编译好的完整css文件！

tailwind.min.css 2.93 MB 超简单，但是打开页面好费劲！

下载来源： https://www.npmjs.com/package/tailwindcss/v/2.2.0?activeTab=code

效果图

1）方案1 - 参考下面的"完整步骤 " - ++安装成功，运行成功++，但是！好多class不生效！

2）方案2 - 不安装tailwindcss，直接使用独立的编译好的完整css文件！

完整步骤

停止HBuilderX的预览
命令行 cd到项目根目录
安装tailwindcss v3 （官方手册 https://v3.tailwindcss.com/docs/flex）
目前uniapp对v4支持还不大够（官方手册 https://tailwindcss.com/docs/flex）
bash 复制代码
```
npm install tailwindcss@3 @tailwindcss/cli -D
```

创建 /tailwind-input.css

css 复制代码

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

创建 /tailwind.config.js

javascript 复制代码

/** @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: [],
}

修改 /package.json，在{}中添加以下代码，不要有注释：

javascript 复制代码

"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

javascript 复制代码

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;
// 主进程输出
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

html 复制代码

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

配置完成！
开始HBuilderX的预览

修改 /pages/index/index.vue，添加代码查看效果：

html 复制代码

<view class="text-3xl font-bold underline hover:bg-red-500">
	Hello world!
</view>

写在后面

uniapp需要另外安装postcss吗？

在使用uni-app进行开发时，通常并不需要手动安装PostCSS，因为uni-app内部已经集成了PostCSS的功能。PostCSS主要用于对CSS进行转换和优化，比如自动添加浏览器前缀、CSS变量替换、CSS模块化等。在uni-app项目中，这些功能通常是通过内置的编译系统自动处理的。

为什么不需要手动安装？

内置支持：uni-app使用了Vue CLI的插件系统，其中包括了对PostCSS的支持。这意味着当你创建一个uni-app项目时，PostCSS已经作为依赖内置了。
自动配置 ：在uni-app中，你可以通过package.json中的postcss字段来自定义PostCSS的配置，例如使用autoprefixer来自动添加CSS前缀。例如：

javascript 复制代码

{
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  }
}

...

参考文章

【笔记】用HbuilderX创建的uniapp项目中，使用tailwindcss_uniapp 使用tailwindcss-CSDN博客文章浏览阅读2.5k次，点赞26次，收藏33次。1. 执行npx tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css --watch 命令后，一直提示ReBuilding...关于如何在uniapp项目(HBuilderX创建的项目)中使用tailwind, 一般能找到的uniapp+tailwind的文章，在HBuilderX创建的项目里都不能用。2. 在main.js中添加： import "@/static/tailwind.css"，整个项目的页面都变成空白了。_uniapp 使用tailwindcsshttps://blog.csdn.net/m0_66382276/article/details/142205410 Hbuilder创建的uniapp工程，使用tailwindcss最优雅的方式 - DCloud问答Hbuilder创建的uniapp工程，使用tailwindcss最优雅的方式 - 简介使用Hbuilder创建的uniapp工程，目前很难找到可以顺利使用tailwindcss的方案本文仅针对 Hbuilder 创建的 uniapp 工程，对于 vue-cli 方式创建的uniapp工程，网上有文章提供了方法，但也可以使用本文的...https://ask.dcloud.net.cn/article/id-40098

其他参考

Using PostCSS

Install Tailwind CSS using PostCSS - Tailwind CSSInstalling Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.https://v3.tailwindcss.com/docs/installation/using-postcssTailwind CLI

Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.https://v3.tailwindcss.com/docs/installationPlay CDN

Try Tailwind CSS using the Play CDN - Tailwind CSSUse the Play CDN to try Tailwind right in the browser without any build step.https://v3.tailwindcss.com/docs/installation/play-cdn

https://www.cnblogs.com/xwwin/p/18374796

https://ask.dcloud.net.cn/article/id-40098__page-2

https://segmentfault.com/a/1190000045385232

https://zhuanlan.zhihu.com/p/694212190

https://blog.csdn.net/qq_63358859/article/details/149071215

https://www.runoob.com/tailwindcss/tailwindcss-installbycdn.html

UnoCSS 是类似 Tailwind 但更轻量的原子化 CSS 引擎，对 UniApp 支持更好

https://unocss.nodejs.cn/

https://juejin.cn/post/7475283309062029327

ending...