Tailwind 默认只生成 content-none 和 content-[""] 两类，自定义 content 值（如 before:content-["Hello"]）需在 tailwind.config.js 的 theme.extend.content 中显式声明 Unicode 转义值（如 "\201C"），否则编译缺失、样式无效。
![如何在tailwind css中使用伪元素content_利用content-[\'text\']语法](https://img.php.cn/upload/article/000/969/633/178011547960648.jpeg)
直接写 before:content-["text"] 大概率不生效——不是语法错，而是 Tailwind 默认只生成 content-none 和 content-[""] 两个类，其他字符串值必须手动配置扩展。
为什么 before:content-["Hello"] 编译失败或没效果
Tailwind 的 JIT 引擎默认对 content 值做白名单限制，只预编译空字符串和 none。任何自定义文本（含空格、符号、Unicode）都需在 tailwind.config.js 中显式声明，否则构建时跳过、运行时无对应 CSS 规则。
- 未扩展时硬写
before:content-["→"]：控制台无报错，但浏览器开发者工具里查不到该样式规则 - 引号格式错误（如漏掉方括号、用双引号嵌套双引号）：PostCSS 报错
Unclosed string - 含空格字符串写成
before:content-["Hello World"]而非加转义或单引号：部分构建环境会截断为"Hello
如何安全添加自定义 content 值
在 tailwind.config.js 的 theme.extend.content 下注册键值对，key 是类名后缀，value 是带引号的 CSS 字符串值：
module.exports = {
theme: {
extend: {
content: {
'check': '["✓"]',
'arrow-right': '["→"]',
'quote-open': '["\201C"]',
'star': '["★"]'
}
}
}
}
之后就能用 before:content-check、after:content-star 等，无需担心转义或 JIT 编译失败。
立即学习“前端免费学习笔记（深入）”；
- Unicode 写法必须用
\XXXX格式（4位十六进制），如左双引号是\201C，不是\u201C - 避免在 value 中写变量或动态拼接，Tailwind 不支持运行时解析
- 图标类名建议语义化（如
content-search），别用content-1这类无意义命名
content-[""] 和 content-none 的区别与使用场景
content-none 对应 content: none，完全移除伪元素内容；content-[""] 对应 content: ""，生成空内容但保留伪元素节点——这是让背景、尺寸、定位生效的前提。
- 要画一个纯色圆点：必须用
before:content-[""]+before:w-2 before:h-2 before:bg-red-500 - 要隐藏已有伪元素（比如响应式下收起装饰）：用
md:before:content-none - 误用
content-none替代content-[""]：伪元素消失，后续所有before:样式全部失效
常见 content 值写法陷阱
即使已扩展配置，引号和转义仍极易出错：
- ✅ 正确：
content-["Hello"]、content-['"']、content-["\2713"] - ❌ 错误：
content-["Hello World"]（空格需整体包裹单引号：content-['Hello World']） - ❌ 错误：
content-["★"]（直接粘贴 emoji 在某些 Node 版本下触发编码异常，优先用 Unicode） - ❌ 错误：
content-[${icon}]（模板字符串无法被 JIT 解析，纯静态值）
真正难的不是写出来，是让不同开发环境、CI 构建、甚至 Safari 15.4 之前的版本都稳定渲染——所以优先走 theme.extend.content 配置，别赌 JIT 的自动推导。
