Shadow DOM中外部样式无效，必须将Tailwind CSS字符串通过textContent注入内部style节点，并确保content配置覆盖模板路径、safelist包含动态类名、shadowRoot设为open模式。
为什么直接引入在Shadow DOM里完全无效
Shadow DOM 的样式隔离机制会天然拦截所有外部样式源：父文档的 <link rel="stylesheet">、@import、甚至全局 <style> 都无法穿透边界匹配内部元素。你看到类名写了 p-4、浏览器也加载了 tailwind.css，但 shadowRoot 里的 <div class="p-4"> 就是不生效——不是漏写，是根本没机会匹配。
必须用 textContent 注入完整 CSS 字符串
唯一可靠路径是把编译后的 Tailwind CSS 内容作为纯文本，塞进 shadowRoot 内部的 <style> 节点。不能只放一个 <link href="/tailwind.css">，也不能用 innerHTML（有 XSS 风险），必须用 textContent：
const style = document.createElement('style');
style.textContent = tailwindCSSString; // 必须是字符串，不是 URL
shadowRoot.appendChild(style);
- 注入时机必须在
shadowRoot创建后、元素渲染前，比如connectedCallback或firstUpdated（Lit）里 - 重复执行会导致样式叠加、权重异常，建议加
data-tailwind-injected标记做幂等判断 - 若用
mode: "closed"，shadowRoot属性返回null，注入静默失败——务必设为"open"
tailwind.config.js 的 content 配置必须覆盖模板路径
即使 style.textContent 正确注入，如果 tailwind.config.js 的 content 字段没扫描到 Shadow DOM 模板所在文件（比如 Lit 的 html`<div class="p-4"></div>`），JIT 引擎压根不会生成 .p-4 这条规则——你注入的 CSS 字符串里根本没有它。
- Lit 项目需在
content中加入'./src/**/*.ts'，并确认模板被 TS/JS 打包器处理（而非纯字符串拼接） - 动态拼接类名（如
class="${dynamicClass}"）必须显式加到safelist，否则 JIT 直接删掉 - Vite 用户可用
import tailwindCSS from '@/styles/tailwind.css?raw'（需配vite-plugin-css-injected-by-js） - Webpack 用户建议用
raw-loader或asset/source类型导入 CSS 为字符串
别忽略 preflight 和工具类的全局性
Tailwind 的 @tailwind base（即 preflight）会重置 button、h1 等原生标签样式，这类规则不依赖类名，prefix 无效，且会在 Shadow DOM 内部一并生效。如果你发现按钮变透明、标题字号异常，大概率是 preflight 在起作用——这不是注入失败，而是它本就该这样。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：注入动作本身不保证规则存在；content 扫描范围和 safelist 是前置条件；而 mode: "closed" 会让所有注入失效，连 shadowRoot.appendChild() 都静默失败。
