Tailwind CSS 默认不支持 ::selection 伪元素，需通过 @layer base 自定义或直接写 CSS 实现选中文本样式；推荐用 @layer base 扩展以确保兼容性和 PurgeCSS 安全；仅 color、background-color 等有限属性生效。
在 Tailwind CSS 中，::selection 伪元素无法直接通过预设工具类控制，因为 Tailwind 默认不生成 ::selection 相关的样式。但你可以轻松通过自定义 CSS 或 Tailwind 的 @layer utilities 扩展来实现文本选中时的背景色修改。
方法一：在 CSS 文件中直接写 ::selection
这是最直观的方式。在你的主 CSS（如 styles.css）中添加：
::selection {
@apply bg-blue-500 text-white;
}
或者用原生 CSS 写法：
::selection {
background-color: #3b82f6; /* 对应 blue-500 */
color: #ffffff;
}
确保该 CSS 在 Tailwind 的 @tailwind base; 之后、@tailwind utilities; 之前引入（推荐放在 @layer base 中）。
方法二：用 @layer base 扩展 Tailwind
在 tailwind.config.js 对应的 CSS 文件中（如 src/styles.css），这样写更规范：
@layer base {
::selection {
@apply bg-indigo-600 text-white;
}
}
好处是语义清晰，且不会被 PurgeCSS 误删 —— Tailwind 会识别 @layer base 并保留其中的规则。
方法三：按需为特定元素定制选中样式
如果只想让某段文字（比如文章正文或标题）有特殊选中效果，可以加 class 后再定义：
.custom-select::selection {
@apply bg-emerald-500 text-yellow-100;
}
然后在 HTML 中使用：
<p class="custom-select">这段文字选中时会变成绿色背景+黄色文字</p>
注意：浏览器对 ::selection 的支持有限制，仅允许设置 color、background-color、text-shadow 和部分字体相关属性，其他如 border、padding 无效。
注意事项与兼容性
- Tailwind v3.0+ 默认不包含
::selection工具类，也不建议手动添加到theme.extend中（它不是“可配置的 utility”） - WebKit 内核（Safari）需要额外写
::-webkit-selection，但现代 Tailwind + PostCSS 通常已自动处理前缀 - 深色模式下若需适配，可用
@media (prefers-color-scheme: dark)覆盖，或结合dark:变体（需确保父元素有darkclass）
不复杂但容易忽略 —— 只要记住把 ::selection 放进 @layer base，就能和 Tailwind 的颜色系统无缝配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
