当前位置：首页 > news >正文

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

news 2025/8/8 5:24:40

写在前面

放弃了。。。

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）
```
npm install tailwindcss@3 @tailwindcss/cli -D
```

创建 /tailwind-input.css

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

创建 /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: [],
}

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

"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

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

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

配置完成！
开始HBuilderX的预览

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

<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前缀。例如：

{"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/142205410Hbuilder创建的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...

查看全文

http://www.lryc.cn/news/612652.html