Tailwind CSS 不支持 selection 修饰符，需在 @layer base 中手动添加 ::selection 和 ::-moz-selection 样式，且仅 color、background-color 等少数属性有效。
selection修饰符在Tailwind中根本不存在
Tailwind CSS 官方并不提供 selection 修饰符（比如 selection:text-red-500），直接写会无效。这是初学者常搜错关键词踩的第一个坑——Tailwind 的伪元素支持非常有限，::selection 不在默认生成的工具类范围内。
必须手动添加 ::selection 样式到 CSS
要控制文本选中颜色，得绕过 Tailwind 的工具类系统，在自定义 CSS 中显式声明 ::selection。推荐放在 @layer base 块里，确保它被尽早应用且不被覆盖：
@layer base {
::selection {
background-color: #3b82f6; /* 对应 tailwind 的 blue-500 */
color: #ffffff;
}
::-moz-selection {
background-color: #3b82f6;
color: #ffffff;
}
}注意两点：
-
::-moz-selection是 Firefox 专属前缀，必须单独写，不能省略 - 不要用
!important—— Tailwind 的工具类优先级通常高于普通 CSS 规则，但@layer base写在@tailwind base之后、@tailwind components之前，天然有合理权重 - 颜色值建议直接用十六进制或 RGB，避免依赖 Tailwind 的色值 token（比如
blue-500），因为构建时不会自动解析变量名
想局部覆盖？用 class + 显式选择器
如果只希望某段文字（比如代码块或标题）有特殊选中样式，不能靠修饰符，得写带作用域的选择器：
立即学习“前端免费学习笔记（深入）”；
.my-article ::selection {
background-color: #10b981;
color: white;
}
.my-article ::-moz-selection {
background-color: #10b981;
color: white;
}然后在 HTML 中加 class：
<article class="my-article"> <p>这段文字选中时会变青绿色</p> </article>
关键点：
- 不能用
selection:工具类组合，也不支持group-selection:这类变体 - 浏览器对
::selection的继承限制很严格——它只接受color、background-color、text-shadow和少数几个属性，其他如font-weight或border会被忽略 - 移动端 Safari 对
::selection支持不稳定，iOS 15.4+ 才开始较完整支持background-color
为什么 Tailwind 不内置 selection 工具类
不是遗漏，是设计取舍：Tailwind 认为 ::selection 属于全局 UI 主题的一部分，变化频率低、适用范围广，更适合收口到基础样式层，而不是拆成几十个响应式/状态类。这也意味着——
你不需要为每个颜色都生成 selection:bg-red-400、selection:bg-blue-400……这些类几乎不会复用，反而增加 CSS 体积。真正需要定制的，往往就 1–2 种主题配色。
所以最轻量也最可控的做法，就是老老实实写两行 CSS，把 ::selection 当作主题配置项来维护。
