:deep() 是 Vue 3 + Vite/webpack 下使 Tailwind 类名作用于子组件内部的唯一合规方式，须配合 scoped 使用且不可用于全局样式；其原理是穿透 scoped 的属性选择器隔离，但需前置锚点选择器、依赖预处理器支持，且存在维护与性能风险。
直接说结论：:deep() 是 Vue 3 + Vite/webpack 环境下，让 Tailwind 类名（或任意类名）生效于子组件内部的唯一合规方式；但必须配合 scoped 使用，且不能写在全局样式里。
为什么 Tailwind 类名在 scoped 下对子组件无效
Vue 的 scoped 会把所有选择器自动加上 [data-v-xxxx] 属性匹配，比如你写 .text-red-500，编译后变成 .text-red-500[data-v-xxxx]。而子组件（如 <el-input></el-input>）的根元素虽带这个属性，其内部元素（如 <input>）并不带 —— 所以该选择器根本选不到它。
Tailwind 本身不生成作用域属性，它的类名是“裸”的，自然被 scoped 隔离机制拦在外面。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 你在
<style scoped></style>里写了@apply text-red-500;或直接写.text-red-500 { color: red; }，但子组件内文字颜色没变 - 控制台看到编译后的 CSS 是
.text-red-500[data-v-xxxx] { ... }，而目标元素 DOM 上没有data-v-xxxx
:deep() 的正确写法与预处理器差异
它不是万能前缀，语法和生效范围取决于你用的 CSS 预处理器和构建工具。
推荐写法（Vite + Vue 3 + SCSS/LESS）：
.custom-wrapper :deep(.el-input__inner) { @apply border-emerald-500; }-
.custom-btn :deep() .el-icon { @apply text-rose-600; }（注意空格位置） - 不要写成
:deep(.el-input) .el-input__inner—— 这会让:deep()只作用于.el-input，而它的子元素仍受 scoped 限制
关键点：
-
:deep()必须紧贴要穿透的目标选择器，且前面必须有当前组件内的一个有效选择器（如.custom-wrapper）作为“锚点” - 在纯 CSS 中不支持
:deep()，需搭配lang="scss"或lang="less" - Vue 2 的
/deep/和::v-deep在 Vue 3 中已废弃，仅:deep()是官方支持的
用 :deep() 改 Tailwind 类名时的性能与维护风险
你可以写 :deep(.bg-blue-500) { @apply bg-indigo-700; }，但这本质是覆盖 Tailwind 的原子类，属于“绕过设计约束”。容易踩的坑：
- Tailwind 的 JIT 模式可能因未显式使用新类名而删掉它（尤其在生产构建时），导致样式丢失
- 如果子组件用了
class="bg-blue-500"，你用:deep()覆盖它，就等于放弃 Tailwind 的响应式前缀（如md:bg-blue-500）——这些不会自动继承 - Element Plus、Ant Design Vue 等库内部结构可能随版本变动，
:deep(.el-table__row)下一版可能改叫.el-table-row，导致样式失效且无报错
更稳妥的做法是：优先用库提供的 CSS 变量（如 --el-color-primary）或 @layer components 在全局 Tailwind 配置中增强，只在必须定制 DOM 深层结构时才动 :deep()。
真正难处理的不是语法，而是判断“该不该穿透”——很多你以为需要 :deep() 的场景，其实该由 UI 库的 slot、props 或主题变量解决。一旦开始写三层嵌套的 :deep()，就得停下来问问：是不是组件职责已经越界了。
