Tailwind 默认不支持 ::first-letter，需在 tailwind.config.js 中通过 addComponents 手动注入规则；中文首字下沉需预处理 HTML、指定带 hinting 的字体，并用 clamp() 实现响应式控制。
为什么直接用 first-letter 在 Tailwind 里不生效
Tailwind 默认不提供 ::first-letter 的原子类，它只生成常规 CSS 属性对应的 class，而伪元素属于“选择器扩展”，不在默认生成范围内。即使你写 class="text-4xl font-bold" 到 p 上，::first-letter 规则也不会自动附加——它需要显式声明在 CSS 中，不能靠 Tailwind 的 utility 类注入。
怎么在 Tailwind 项目里安全启用 ::first-letter
必须手动扩展 Tailwind 配置，在 tailwind.config.js 的 theme.extend 或 plugins 中注入规则。推荐用 addComponents 方式，避免污染全局样式：
- 确保目标段落是块级元素（
p、div），且首字符前无空格、换行或 HTML 标签 - 在
tailwind.config.js里添加：module.exports = { theme: { extend: { fontFamily: { serif: ['"Noto Serif CJK"', 'serif'], } } }, plugins: [ function({ addComponents }) { addComponents({ 'p::first-letter': { 'float': 'left', 'font-size': '3rem', 'line-height': '0.8', 'margin-right': '0.2em', 'font-family': '"Noto Serif CJK", serif', 'font-weight': '700' } }) } ] } - 注意：不要在
font-size里写text-5xl这类类名——它不会编译进伪元素；必须用具体值（3rem）或clamp()
中文首字下沉时最常踩的三个坑
中文没大小写，标点易误选，字体渲染差异大——这三点让 ::first-letter 表现比英文更不可控：
- 首字符是
《、【、“时，浏览器真会把它放大下沉，视觉上完全错位；解决办法是预处理 HTML，或改用手动包裹：<span class="dropcap">对</span>于世界而言... - 中文字体在大字号下容易发虚或基线偏高，
line-height: 0.8不够，得加margin-bottom: -0.15em微调垂直位置 - 用
font-family: system-ui或免费字体时，放大后字形边缘糊成一片；优先指定"Noto Serif CJK"、"PingFang SC"等带 hinting 的字体
响应式首字下沉别硬套 text-xl，该用 clamp()
Tailwind 的响应式断点（如 md:text-4xl）对伪元素无效——它只作用于普通 class。要真正适配不同屏幕，必须在自定义 CSS 中用 clamp()：
立即学习“前端免费学习笔记（深入）”；
-
font-size: clamp(2rem, 6vw, 3.5rem)—— 小屏不撑破，大屏不下沉不足 -
line-height: clamp(0.65, 2.5vmin, 0.85)——vmin比em更稳，尤其竖屏手机 - 别忘了给
margin-right也做响应式：margin-right: clamp(0.1em, 2vw, 0.25em)，否则小屏文字挤到下沉字下面
伪元素的响应式控制始终是“手写 CSS”的事，Tailwind 只负责帮你把这部分样式组织进构建流程。一旦你开始依赖精确下沉高度或跨行环绕，就得接受：它不是 utility-first 能覆盖的边界。
