Tailwind 默认不支持 data-[state=open] 等组件状态类，需通过 tailwindcss-radix 插件或手动配置 addVariant 才能生效；否则 JIT 引擎无法生成对应 CSS 规则。
直接结论：Tailwind 本身不原生支持组件状态（如 data-[state=open]），必须借助插件（如 tailwindcss-radix）或手动配置 content 扫描 + 自定义变体，否则写出来的状态类不会生效。
为什么 data-[state=open]:bg-blue-50 在默认 Tailwind 下无效？
因为 Tailwind 的 JIT 引擎只生成它“看到”的类——而 data-[state=open]: 这类属性选择器变体，默认不在扫描范围内，也不会被解析为合法变体前缀。你写进 HTML，CSS 文件里根本没对应规则，自然不生效。
- 默认只识别标准伪类：
hover:、focus:、disabled:等 -
data-属性变体需显式声明，否则属于“未定义变体”，会被忽略 - 即使你用了 Radix UI 组件，没配插件，
data-[state=checked]也纯属摆设
用 tailwindcss-radix 支持 data-[state=...] 的正确姿势
这是目前最稳定、零配置负担的方案，专为 Radix 组件状态设计，自动注册全部常用状态变体。
- 安装：
pnpm add tailwindcss-radix（或npm install tailwindcss-radix） - 在
tailwind.config.js的plugins数组中添加：require("tailwindcss-radix")() - 无需额外声明
variants或修改content，插件会自动注入data-[state=open]:、data-[state=checked]:、data-[state=active]:等变体 - 直接在 JSX/HTML 中使用：
data-[state=open]:bg-gray-50 data-[state=open]:p-3
手动配置自定义变体（不用插件时的替代方案）
适合轻量场景或非 Radix 的自定义数据属性，但要注意 JIT 扫描限制和性能影响。
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的content里确保包含所有含data-[state=...]的文件路径，例如：./src/**/*.{ts,tsx,jsx,js} - 启用
variants（v3.4+ 需通过插件方式）：module.exports = { plugins: [({ addVariant }) => { addVariant('open', '&[data-state="open"]'); addVariant('checked', '&[data-state="checked"]'); }] } - 注意：手动
addVariant不支持动态值（如data-[state=${x}]），只能枚举固定值 - 若用
data-[state]通配写法，必须配合content扫描真实出现的字符串，否则仍不生成
容易踩的坑：变体嵌套与优先级陷阱
状态变体不是万能胶，组合不当会导致样式失效或覆盖混乱。
-
data-[state=open]:hover:bg-blue-600是合法的，但顺序不能颠倒：hover:data-[state=open]:bg-blue-600无效（Tailwind 不支持伪类包裹 data 变体） - 多个
data-条件叠加（如data-[state=open][data-disabled]）需用插件支持或手动addVariant定义复合变体 - Radix 的
data-[state]值是字符串字面量（"open"），不是布尔值，写成data-[state=true]或data-state都不匹配 - 开发时开浏览器 DevTools 检查元素是否真有
data-state="open"属性——很多问题其实出在组件没正确触发状态，而非 CSS
真正麻烦的从来不是怎么写变体，而是确认状态属性是否真实存在、是否被 JIT 扫描到、以及变体是否被正确注册。别急着堆 class，先看 DOM 里有没有那个 data-[state]。
