必须使用兼容版本组合安装并配置tailwind css，因uni-app和taro 4依赖postcss 7，而tailwindcss@latest要求postcss 8+，且wxss不支持冒号、星号等选择器，需通过postcss-class-rename转换类名、css-byebye移除非法规则，并禁用preflight等不支持插件。
不能直接用 npm install tailwindcss 安装最新版，否则会因 PostCSS 版本冲突导致构建失败。必须用兼容版本 + 手动重命名类名 + 禁用不支持的插件，才能在小程序里跑起来。
为什么 tailwindcss@latest 在小程序里会报错
uni-app 和 Taro 4 的底层编译链依赖 PostCSS 7，而 tailwindcss@3.0+ 默认要求 PostCSS 8+；同时小程序 WXSS 不支持 :hover、* {}、.a > .b 这类选择器，原生 Tailwind 生成的 CSS 会直接被微信开发者工具拒绝解析。
-
postcss@^8与@dcloudio/uni-cli冲突，编译时抛出Error: Cannot find module 'postcss' - 默认
preflight插件注入的* {}和html {}规则，在小程序里触发 WXSS 解析错误 -
hover:xxx、focus:xxx类名会被编译成含冒号的 class，但小程序 WXML 不允许冒号出现在 class 名中
必须安装的兼容依赖组合
执行这条命令，它锁定了能协同工作的版本：
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename css-byebye
其中关键点：
-
tailwindcss@npm:@tailwindcss/postcss7-compat是官方提供的 PostCSS 7 兼容包，不是降级，而是专用适配层 -
postcss-class-rename负责把hover:bg-blue-500→hover--bg-blue-500（注意是双短横，不是下划线） -
css-byebye用来移除* {}、html {}等小程序无法解析的规则
tailwind.config.js 的核心禁用项
以下配置不是可选项，而是必须写死的：
module.exports = {
content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
corePlugins: {
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false
},
theme: {
extend: {}
},
plugins: []
}
原因很实际：
-
preflight: false—— 否则* {}会进最终 WXSS，微信开发者工具直接报错「WXSS 编译失败」 -
space等插件生成的.space-y-2 > :not([hidden]) ~ :not([hidden])选择器，小程序完全不认 - 别碰
variants字段，Taro/uni-app 都不支持它，写了也无效
postcss.config.js 中的 rename 和 byebye 顺序不能错
必须让 postcss-class-rename 在 css-byebye 之前运行，否则 rename 后的类名可能被误删：
module.exports = {
plugins: [
require('tailwindcss')({}),
require('postcss-class-rename')({
'\\:': '--',
'\\.': '--',
'\\/': '--'
}),
require('css-byebye')({
rulesToRemove: [/\*/]
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
注意：\\: 是四重转义，因为 JS 字符串 + 正则双重解析；如果写成 ':' 或 '\:'，rename 就不会生效。
最常被忽略的一点：所有类名中的 /（如 w-1/2）必须转成 -div-，否则小程序 WXML 解析器会把它当成标签闭合符处理，导致样式丢失。这个转换必须由 postcss-class-rename 完成，不能靠手动改类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
