tailwind 默认不支持 ::first-letter 是因伪元素无法静态生成可靠原子类；text-capitalize 仅转换英文单词首字母大小写，无法实现中文首字下沉效果；需用 @layer utilities 手写 css 并严格保证首字符裸露、父容器为块级且非 flex/grid。
::first-letter 在 Tailwind 中默认不可用，这不是配置遗漏，而是设计取舍——伪元素无法静态生成可靠、可组合的原子类。真要实现首字母大写+下沉（比如导语“第”字放大加粗并文字环绕），必须手写 CSS。
为什么 text-capitalize 不能替代 ::first-letter
capitalize 类只作用于整个元素，把每个单词首字母转大写，对中文无效，且无法单独控制第一个字符的 font-size、float、line-height 或 margin-right。它和首字下沉是两回事：capitalize 是文本转换，::first-letter 是排版定位。
- 中文段落写
<p class="capitalize">今天天气很好</p>→ 完全无变化 - 英文段落写
<p class="capitalize">hello world</p>→ 变成 "Hello World"，但首字母没放大、没浮动、没下沉 - 想让“第”字变成 3em + 左浮动 + 行高 0.8 + 右边距 0.2em？
capitalize做不到
怎么在 Tailwind 项目里安全启用 ::first-letter
最轻量做法是在 src/styles.css（或全局 CSS 入口）里用 @layer utilities 注入自定义类：
@layer utilities {
.drop-cap::first-letter {
float: left;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 0.75;
margin-right: 0.2em;
font-weight: bold;
color: #1e293b;
}
}
然后在 HTML 中使用：<p class="drop-cap">第一页内容从这里开始…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 必须确保
<p></p>是块级元素（默认就是），且首字符前**没有换行、空格、注释或内联标签**，例如<p><span>第</span>一页…</p>会失效 - 若父容器用了
display: flex或display: grid，::first-letter直接静默不生效 - 不要依赖
vertical-align微调位置；改用margin-top: -0.1em或transform: translateY(-2px)更可控
中文首字下沉最容易翻车的三个点
中文不像英文有明确“首字母”，浏览器对全角标点（《、【、”）的识别不一致，加上中文字体基线差异大，稍不注意就错位或截断。
- 首字符是
《或“？它会被当成“首字”放大，溢出严重——上线前务必用真实 CMS 数据验证，别只测“你好” -
line-height: 0.75在思源黑体下可能刚好，在 Noto Sans SC 下底部被裁切——建议统一用无单位值，并搭配overflow: hidden防溢出 - 响应式时固定
font-size: 3em在手机上会撑破容器——优先用clamp(2rem, 4vw, 3.5rem)，避免vmin在 iOS Safari 缩放后重绘异常
真正难的不是写出那几行 ::first-letter 样式，而是每次换字体、加图标、切响应式断点时，都要重新校验 DOM 结构是否干净、首字符是否裸露、浮动是否被父级布局切断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
