tailwind 不支持 selection 变体，需在 @layer base 中手动声明 ::selection 和 ::-moz-selection；伪元素样式无法局部化，且仅支持有限 css 属性。
selection 变体在 Tailwind 中并不存在
直接写 selection:bg-blue-200 不会生效——Tailwind 默认不提供 selection 伪元素变体。这不是你配置错或版本低的问题，而是设计如此：Tailwind 的核心变体（如 hover:、focus:）不包含 ::selection，它无法通过默认前缀生成对应 CSS 规则。
必须手动添加 ::selection 样式到 CSS
最可靠的做法是绕过 Tailwind 的 utility 机制，在自定义 CSS 中显式声明。推荐放在 @layer base 块里，确保优先级合理且全局生效：
@layer base {
::selection {
@apply bg-blue-200 text-gray-900;
}
/* 如果需要兼容旧版 WebKit */
::-moz-selection {
@apply bg-blue-200 text-gray-900;
}
}
- 务必同时写
::selection和::-moz-selection，Firefox 仍需前缀 -
@apply可复用已有的 Tailwind 类名，但注意：仅限于已启用的 color palette（如blue-200确实存在） - 避免在组件 scoped style 或内联
style标签中写，否则可能被隔离或覆盖
为什么不用 @layer components 或插件强行加 selection: 变体
有人尝试用 addVariant 注册 selection，但实际效果有限：
- Tailwind 生成的类名（如
selection:bg-blue-200）最终要映射到::selection { background-color: #e0f2fe; }，而伪元素规则无法通过普通 class 绑定到任意元素——它总是作用于整个文档或父容器内所有可选中文本 - 强行绑定会导致样式泄漏（比如只想改某个
<div> 内的选中色，但生成的 CSS 是全局 <code>::selection） - 维护成本高，且与 Tailwind “utility-first” 哲学冲突：选中态不是原子化可组合的状态，而是文档级视觉反馈
如果真要按容器隔离选中样式
只能靠原生 CSS 选择器限定范围，例如：
.article-content::selection {
background-color: #c7d2fe;
}
.article-content::-moz-selection {
background-color: #c7d2fe;
}
- 不能用
selection:变体实现这种局部控制 - 此时建议直接写 class 名 + 原生伪元素，别硬套 Tailwind 工具类
- 若项目大量使用，可抽成
@layer components里的可复用块，但依然不是变体
真正容易被忽略的是：浏览器对 ::selection 的支持非常有限——只允许 color、background-color、cursor、outline 等极少数属性，其他如 font-size 或 padding 会被静默忽略。
