Tailwind 的伪元素修饰符（如 before:、after:）仅在 HTML 中直接使用的工具类中生效，不会解析自定义 CSS 类中的伪元素规则；必须在 tailwind.config.js 的 theme.extend.content 中显式声明 content 值，且需配合 display、尺寸等属性才能可见。
伪元素修饰符在自定义 CSS 类里根本不会被解析
Tailwind 的 before:、after: 等伪元素修饰符只作用于 HTML 元素的 class 属性中直接写的工具类，**不会穿透到你手写的 @layer components 或 @layer utilities 里定义的自定义类中**。你在 CSS 文件里写 .icon-btn::before { content: "→"; }，哪怕加了 before:content-["→"] 这样的类名，Tailwind 也完全不认——它压根不会去扫描你自定义 CSS 里的选择器。
- Tailwind 的 JIT 引擎只扫描
content配置路径下的源文件（如.html、.js），提取其中出现的完整工具类字符串，比如before:content-["→"] - 它不会解析你 CSS 文件里
::before块里的任何内容，更不会把before:当作前缀去匹配或生成规则 - 所以
@layer components { .btn-icon { @apply before:content-["→"] before:block; } }这种写法会静默失败：@apply只能展开已存在于 Tailwind 工具类集合里的类，而before:content-["→"]若未在content配置中声明，就根本不在这个集合里
想在自定义类里用伪元素，必须提前声明 content 值
即使你把 before:content-["→"] 写进 HTML 的 class 属性里，它也得先被 Tailwind 编译出来才有用。而默认配置下，Tailwind 只生成 content-none 和 content-[""] 两个类，其他所有字符串值（包括 "→"、"✓"、"New & improved"）都必须手动加进 tailwind.config.js 的 theme.extend.content 里，否则构建时跳过，CSS 里压根没这条规则。
- 正确做法是在
tailwind.config.js中扩展：module.exports = { theme: { extend: { content: { 'arrow': '"→"', 'check': '"✓"', 'quote-open': '"\201C"', // Unicode 必须用 XXXX 格式 } } } } - 之后才能在 HTML 里安全使用：
before:content-[arrow] before:block，或在@apply中：@apply before:content-[arrow] before:block; - 注意：引号必须是双引号包裹的字符串字面量；
before:content-['→']在部分构建环境不稳定，不推荐
伪元素在自定义类中“生效”但不可见，其实是 display 和尺寸缺失
就算 before:content-["→"] 被成功编译并应用到了自定义类上，它也只设置了 content 属性。浏览器生成的 ::before 节点默认是 display: inline，没有宽高、不占布局、不可见——这不是 Tailwind 的 bug，是 CSS 本身的行为。
- 必须显式补全至少一项可见性依赖：
before:block或before:inline-block（解决 display） - 加上尺寸：
before:w-3 before:h-3（否则w-/h-类无效） - 若用了
before:absolute，宿主元素必须有relative，否则定位参考系错乱 - 想盖住文字？加
before:z-10，且确保宿主已有层叠上下文（relative就够）
动态拼接或 JS 插入的伪元素类大概率失效
用 JavaScript 动态设置 element.className = "before:content-['→'] before:block" 看似可行，但实际风险极高：
立即学习“前端免费学习笔记（深入）”；
- 引号嵌套容易出错：
'before:content-["→"]'在字符串里要转义，极易写成语法错误 - 如果类名拼接时漏了空格（比如
"before:content-['→']before:block"），浏览器会当成一个类名，Tailwind 规则不匹配 - JIT 编译器不会运行时扫描 JS 字符串，你 JS 里写的
content-["→"]若未在构建时出现在 HTML/JS 源文件中，CSS 里就没有对应规则 - 真正稳妥的方式：预设好带伪元素的完整工具类组合（如
btn-with-arrow），在 HTML 里静态使用，或用classList.add()批量添加已知有效的类名
before:content-["x"] 就完事了，其实它连 CSS 规则都没生成——连“不生效”的机会都没有。 
