tailwind 不支持直接使用 [type="submit"] 等原生属性选择器语法，仅 disabled:、required:、checked: 等内置属性变体可用；自定义属性需通过 @layer base 或 @layer components 手写 css 实现。
属性选择器在 Tailwind 中不能直接写成 [type="submit"]
你没法在 HTML 里直接写 class="[type="submit"]:bg-blue-500" —— Tailwind 默认不解析这种原生 CSS 属性选择器语法。它只认自己定义的变体前缀（如 hover:、disabled:），而 [attr=val] 不在其内置变体列表中。强行这么写，构建时会被忽略，浏览器也收不到对应规则。
disabled: 和 required: 是少数能用的“伪属性选择器”
Tailwind 把部分 HTML 属性映射成了变体，本质是生成了带属性选择器的 CSS 规则，比如：
-
disabled:opacity-50→ 编译为input:disabled { opacity: 0.5; } -
required:border-red-500→ 编译为input:required { border-color: #ef4444; } -
checked:bg-green-500→ 编译为input:checked { background-color: #22c55e; }
这些是安全可用的，但仅限于 Tailwind 显式支持的属性（见 tailwind.config.js 的 variants.extend 或默认列表）。别指望 data-* 、aria- 或自定义属性能被自动识别。
想用真实属性选择器？得靠 @layer base 或 @layer components
比如要给所有 target="_blank" 的链接加图标，或对 [data-state="loading"] 元素统一禁用交互，必须手写 CSS：
@layer base {
a[target="_blank"]::after {
@apply ml-1 inline-block w-2 h-2 bg-blue-500 rounded-sm;
}
[data-state="loading"] {
@apply opacity-75 cursor-not-allowed;
}
}
注意三点：
- 别塞进
@layer utilities—— 它只接受单属性原子类，不支持选择器嵌套 - 用
@layer base保证全局生效；若只作用于某组件，改用@layer components并配合语义 class（如.card）限定范围 - 避免用
!important，优先靠层级（.parent [data-state]）或 specificity 控制覆盖逻辑
任意值语法 [attr=val] 是障眼法，不是选择器
有人试过 class="[data-id="123"]:text-red-500"，发现没效果——这不是 bug，而是设计如此。[...] 任意值语法只用于**声明单个 CSS 属性值**（如 [color:red]），不能用来构造选择器结构。它不会生成 [data-id="123"] { color: red }，只会尝试把 [data-id="123"] 当作一个无效的属性名去解析，最终丢弃。
真正要按属性筛选元素，唯一可靠路径就是手写带属性选择器的 CSS 块，并放进合适的 @layer 中。别幻想用 utility 类绕过这个限制，否则后期维护时你会反复掉进 specificity 泥潭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
