wxss解析器不支持tailwind类名语法，因:, /, [, ]等字符非法；weapp-tailwindcss可结构化转换类名，需正确配置content路径、关闭preflight，并确保动态class使用转换后值。
WXSS解析器根本不认Tailwind的类名语法
微信小程序用的是WXSS，不是CSS。它对选择器语法有硬性限制：:、/、[、]、& 这些字符在WXSS里直接非法。像 hover:bg-blue-500、w-1/2、text-[#333] 这类Tailwind生成的类名，根本不会被解析——不是“没生效”，是压根不进样式表。
这跟浏览器兼容性无关，是底层解析规则卡死。哪怕你在H5端跑得飞起，在小程序模拟器里照样空白。
weapp-tailwindcss 是目前最稳的转换方案
它不是简单地把冒号替换成横线，而是按语义做结构化重写：
-
hover:bg-blue-500→hover-bg-blue-500 -
w-1/2→w-1-2 -
text-[#333]→text-333 - 还能处理
text-[--theme-color]这种CSS变量引用
安装后在 tailwind.config.js 里加插件即可：
plugins: [
require('weapp-tailwindcss')({
prefix: 'tw-', // 避免和已有类冲突
debug: false // 上线前必须关掉
})
]
content 路径配错 = 白忙活
插件只负责“翻译”，但Tailwind还得扫到你写的类。如果 content 没覆盖 .wxml 文件，转换后的类根本不会进最终CSS。
常见错误包括：
- 只写了
src/**/*.{js,ts,vue}，漏掉src/**/*.wxml - 用了uni-app但路径写成
pages/**/*.{vue}，没包含pages/**/*.wxml - 在Taro中误用
src/pages/**/*.{tsx,jsx}，实际要扫描编译后的dist/**/*.wxml
preflight 必须关，否则会污染全局样式
小程序不支持 @layer base 和CSS重置规则，Tailwind默认的 preflight 插件会注入大量基础样式，导致：
- 按钮、输入框等原生组件样式被覆盖
- 部分WXSS特性（如
flex-direction: column-reverse）被重置失效 - 真机上出现不可预测的布局偏移
务必在 tailwind.config.js 中显式关闭：
corePlugins: {
preflight: false
}
真正容易被忽略的点是：转换插件只改类名，不改单位、不改变量、不处理动态class绑定逻辑。比如 class="text-${color}" 这种字符串拼接，必须确保 color 的值本身已是转换后的格式（如 "text-blue-500" 而非原始 "text-[#333]"），否则运行时还是无效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
