Tailwind 默认不支持 data-[state=open] 等组件状态类，必须通过 tailwindcss-radix 插件或手动 addVariant 显式注册变体，否则 JIT 引擎无法生成对应 CSS 规则。
默认不生效，必须显式注册变体或装插件，否则 data-[state=open]:bg-blue-50 这类写法纯属无效。
为什么 data-[state=open] 在默认 Tailwind 下完全没效果
Tailwind 的 JIT 引擎只生成它“扫描到且识别为合法变体”的 CSS 规则。data-[state=open] 属于自定义属性选择器变体，默认不在识别列表里。你写进 HTML，DevTools 里根本找不到对应 CSS 规则——不是浏览器不支持，是 Tailwind 根本没生成。
常见错误现象：
- 页面上元素明明有
data-state="open"，但data-[state=open]:bg-gray-100一点反应没有 - 用
tailwindcss-radix却忘了加到plugins数组里，结果还是白写 - 手动
addVariant时写了&[data-state="open"]，但content没扫到含该字符串的文件，规则照样不生成
用 tailwindcss-radix 快速支持 data-[state=]
这是目前最省心、覆盖最全的方案，专为 Radix UI 等组件状态设计，自动注册 open、checked、active、disabled 等全部常用值。
立即学习“前端免费学习笔记（深入）”；
- 安装：
pnpm add tailwindcss-radix（或npm install tailwindcss-radix） - 在
tailwind.config.js的plugins中添加：require("tailwindcss-radix")() - 无需改
content，无需手写addVariant，直接在 JSX/HTML 里用：data-[state=open]:p-3 data-[state=checked]:text-green-600
手动配置 addVariant（轻量场景或非 Radix 项目）
适合只需要几个固定状态（比如只用 open 和 loading），又不想多装依赖的情况。但要注意：它不支持通配或动态值，只能枚举。
- 确保
content包含所有含data-[state=...]的文件路径，例如：./src/**/*.{ts,tsx,js,jsx} - 在
plugins中写：module.exports = { plugins: [ ({ addVariant }) => { addVariant('open', '&[data-state="open"]'); addVariant('loading', '&[data-state="loading"]'); addVariant('error', '&[data-state="error"]'); } ] } - 之后就能用：
open:bg-blue-50 loading:opacity-70 error:text-red-600
容易踩的坑：嵌套顺序和优先级
data-[state=open]:hover:bg-blue-600 合法，但 hover:data-[state=open]:bg-blue-600 无效——Tailwind 不支持伪类包裹 data 变体。
- 组合多个状态时，务必按 “断点 → data 变体 → 伪类 → 工具类” 顺序写，例如：
md:open:hover:bg-blue-600 - 不要指望
data-[state=open] hover:能同时触发两个独立逻辑；它们是不同机制，CSS 选择器权重也不同 - 如果发现样式被覆盖，打开 DevTools 查看 computed styles，确认是否真有对应规则生成，而不是被更具体的 class 或 inline style 干扰
真正麻烦的不是怎么写，而是忘记「变体必须被 JIT 扫描到 + 显式声明」这个前提。哪怕只漏掉一行 require("tailwindcss-radix")()，或者 content 路径写错一个字符，整个状态链就断了。
