wxss 解析器不支持冒号、斜杠、方括号等 css 语法，hover:bg-blue-500 等类名会被直接丢弃；需用 weapp-tailwindcss 做语义化结构转换，并正确配置 prefix、content 路径及动态 class 写法。
WXSS 解析器根本不认 hover:bg-blue-500、w-1/2、text-[#333] 这类类名——不是“没生效”，是压根不解析。微信小程序用的是 WXSS，不是 CSS，它对选择器语法有硬性限制：:、/、[、]、& 全部非法。
必须做结构化转换，而不是简单替换字符；否则动态类、CSS 变量、任意值语法全崩。
WXSS 不支持冒号和方括号，不是兼容性问题，是语法拒绝
浏览器能跑的 lg:hover:text-red-600，在小程序里直接被跳过。WXSS 解析器遇到 : 就终止解析，连带整个选择器丢弃。这不是样式没加载，是根本没进样式表。哪怕你用 Vite + Vue 开发，H5 端完美，真机调试照样空白。
weapp-tailwindcss 是目前唯一可靠的结构化转换方案
它不是把 : 替成 - 那么粗暴，而是按语义重写：
-
hover:bg-blue-500→hover-bg-blue-500 -
w-1/2→w-1-2 -
text-[#333]→text-333 -
text-[--theme-color]→text-theme-color（保留变量引用语义）
配置时注意两点：
-
prefix必须设（比如tw-），避免和已有类冲突 -
debug: false上线前务必关掉，否则会保留原始类名污染体积
content 路径配错 = 转换白做
插件只负责“翻译”，但 Tailwind 仍需扫描到你写的类。如果 content 没覆盖 .wxml 文件，转换后的类根本不会进最终 CSS。
- uni-app 项目要写成
content: ['./src/**/*.{vue,js,ts,wxml}'] - 原生小程序要包含
pages/**/*.wxml和components/**/*.wxml - 漏掉任何一类路径，对应页面的类就彻底消失
动态 class 绑定会触发 WXML 转义双引号崩溃
uni-app 或原生小程序中这样写：
<view class="p-[32rpx]" :class="{ 'text-[--theme-color]': isActive }"></view>
编译后生成的 .wxml 会出现 "text---theme-color-" 这种带转义双引号 \" 的字符串，而 WXSS 模板引擎直接报错：unexpected character \。
- 静态 class 用转换后值（如
tw-p-32rpx） - 动态部分改用数组形式：
:class="['tw-p-32rpx', isActive && 'tw-text-theme-color']" - 或加后处理脚本，把编译产出的
.wxml中所有\"替换为'
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
