tailwind 默认不生成 content 工具类，需在 tailwind.config.js 的 theme.extend.content 中预定义双引号包裹的字符串（如 '"→"'），并用 before:content-[arrow] 配合 before:block 等显示；unicode 须写为 '94' 格式，禁止动态拼接用户输入。
不能直接用 before:content-["→"] 这类写法让内容显示出来——它可能被编译，但几乎一定会失效，除非你提前在配置里定义好。
为什么 before:content-["→"] 大概率不生效
Tailwind 默认**不生成任何带 content 值的工具类**，这是刻意为之：避免 CSS 体积膨胀、防止 XSS 风险（比如用户输入的字符串被拼进 content）、也规避了引号转义混乱问题。你写的 before:content-["→"] 在构建时会被忽略，或因引号/Unicode 转义格式错误而编译失败。浏览器 DevTools 里能看到该类名存在，但对应的 CSS 规则压根没生成。
- 单引号包裹（
before:content-['→']）在部分构建环境（如某些 PostCSS 版本或 Vite 插件）下不稳定，推荐回避 - Unicode 写法必须用
94这种四位十六进制格式，u2794或➔都不行 - 即使
content编译成功，伪元素默认display: none，没有before:block或before:inline-block就看不见
正确做法：在 tailwind.config.js 中预定义 content
必须通过 theme.extend.content 显式声明你要用的字符串，且值必须是双引号包裹的字面量（包括 Unicode）：
module.exports = {
theme: {
extend: {
content: {
'arrow': '"→"',
'check': '"✓"',
'quote-open': '"\201C"', // 注意双反斜杠： → \
'star': '"★"'
}
}
}
}
- 每个 key（如
arrow）将成为可复用的标识符，对应 HTML 中的before:content-[arrow] - Unicode 必须用
\XXXX格式（注意是两个反斜杠），因为 JS 字符串解析需要转义 - 引号必须是双引号，且整个值要被双引号包裹，即
""→""的结构 - 修改后需重启构建进程（如
npm run dev），否则新类不会进入 CSS 输出
HTML 中使用时必须补全显示逻辑
只加 before:content-[arrow] 不够，伪元素无尺寸、无定位、不占文档流：
- 至少要配
before:block或before:inline-block让它“有盒子” - 常用组合：
before:content-[arrow] before:block before:w-4 before:h-4 before:text-sm - 若需精确定位（比如图标在文字左侧），得加
before:absolute+relative父容器 + 手动before:left-0等 - 纯装饰性内容建议用
aria-hidden="true"，避免屏幕阅读器误读
动态内容或 SSR 场景下更稳妥的选择
如果内容来自 props、state 或服务端渲染（如 Next.js），硬编码到配置里就不现实。此时应：
- 改用内联
style：style={{ '--tw-content': '"→"' }}+ 自定义 CSS 变量支持（需额外配置@layer utilities） - 或退回到传统 CSS 文件中写
.icon-arrow::before { content: "→"; }，再配合@apply使用 - 避免在构建时拼接用户输入进
content，尤其不要用before:content-[${userInput}]—— 这是安全红线
最易被忽略的一点：伪元素的 content 值一旦定义就固化在 CSS 文件里，无法运行时改变。想切换箭头方向？别靠改 content，用 rotate-90 或切换 class 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
