HBuilderX 项目中集成 TailwindCSS
在 uni-app 小程序项目中集成 TailwindCSS 可以使用原子化的 CSS class 来编写样式，提升开发效率并减少最终样式体积。但由于小程序的 CSS 限制（不支持 * 选择器、部分伪类等），需要特殊处理。本节详细讲解在 HBuilderX 初始化的项目中集成 TailwindCSS 的完整流程。
安装依赖
npm install -D tailwindcss
npx tailwindcss init
bash
执行后会在项目根目录生成 tailwind.config.js 配置文件。
配置 tailwind.config.js
content 路径配置
指定 TailwindCSS 扫描的文件范围：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.vue',
'./components/**/*.vue',
'./main.js',
'./App.vue',
'./index.html'
],
// ...
}
javascript
小程序兼容配置
小程序不支持部分 CSS 特性，需要在 corePlugins 中禁用：
module.exports = {
corePlugins: {
// 禁用小程序不支持的特性
space: false,
divideWidth: false,
divideColor: false,
divideStyle: false,
divideOpacity: false,
// 禁用 Tailwind 的预置样式（uni-app 已有预置样式）
preflight: false
}
}
javascript
伪类兼容
小程序不支持 : 开头的伪类写法（如 hover:bg-red-500），需要改为双下划线写法：
// 原写法（小程序不支持）
hover:bg-red-500
// 改写法
hover__bg-red-500
javascript
输入输出配置
创建输入文件
在项目根目录创建 tailwind.input.css：
@tailwind utilities;
css
注意：去掉了 @tailwind base 和 @tailwind components，因为小程序不支持 * 选择器（Tailwind 的 base 中包含 * 重置样式）。
配置输出路径
输出到 static 目录：
npx tailwindcss -i ./tailwind.input.css -o ./static/tailwind.css --watch
bash
在 main.js 中引入
import './static/tailwind.css'
javascript
自动化脚本
在 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\" --minify"
}
}
json
配合 vite.config.js 自动启动
在 vite.config.js 中根据环境变量自动启动 TailwindCSS 编译：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { exec } from 'child_process'
export default defineConfig({
plugins: [uni()],
// 根据环境变量自动启动 TailwindCSS
}))
// 自动启动逻辑
const mode = process.env.NODE_ENV
const cmd = mode === 'production'
? 'npm run tailwind:build'
: 'npm run tailwind:dev'
exec(cmd, { cwd: __dirname }, (error, stdout, stderr) => {
if (error) {
console.error('TailwindCSS error:', error)
return
}
if (mode === 'production') {
console.log('TailwindCSS 生产构建完成')
}
})
javascript
工作原理
tailwind.input.css 开发/构建时
↓ tailwindcss CLI ↓
扫描 .vue 文件中的 class → 匹配对应的样式
↓ ↓
生成 static/tailwind.css → main.js 引入
↓
uni-app 编译打包
text
- 开发模式：
--watch监听文件变化，自动重新生成 - 构建模式：
--minify压缩输出，删除未使用的样式
验证集成
在页面中使用 TailwindCSS class 测试：
<template>
<view class="text-xl text-red-500">测试文字</view>
</template>
vue
修改 class 后检查 static/tailwind.css 文件是否自动更新。
小程序集成 TailwindCSS 的注意事项
| 问题 | 原因 | 解决方案 |
|---|---|---|
* 选择器报错 | 小程序不支持通配符 | 移除 @tailwind base |
| 预置样式冲突 | uni-app 自带预置样式 | 设置 preflight: false |
| 伪类不生效 | 小程序不支持 : 语法 | 改用双下划线写法 |
| 样式不更新 | CLI 未监听到变化 | 检查 content 路径配置 |
↑