tailwind 默认不支持 ::first-letter 伪元素，因其依赖静态 class 扫描而伪元素需运行时解析；必须在 tailwind.config.js 中手动启用 first-letter 变体并配合原生 css 使用。
::first-letter 伪元素在 Tailwind 中默认不启用，直接写 class="first-letter:text-4xl" 不生效——Tailwind 不解析伪元素类名，必须手动扩展配置并配合原生 CSS 使用。
为什么 Tailwind 默认不支持 ::first-letter
Tailwind 的核心机制是扫描 HTML 中的 class 名生成对应 CSS 规则，而 ::first-letter 是运行时由浏览器解析的伪元素，无法被静态扫描捕获。即使你写了 first-letter:font-bold 这类自定义类，也不会自动产出 p::first-letter { font-weight: bold; }。常见错误现象包括：样式完全无反应、首字变大但文字不环绕、中文首字被跳过。
必须在 tailwind.config.js 中启用 first-letter 变体
这是最关键的一步，缺了它后续所有样式都白搭：
- 打开
tailwind.config.js - 在
theme.extend下添加textOpacity（可选）和extend块中声明first-letter变体 - 确保启用了
variants或（v3.0+）plugins中的typography插件（但注意：官方@tailwindcss/typography插件默认不处理::first-letter，仍需手写）
最简可靠配置示例：
module.exports = {
theme: {
extend: {
variants: {
extend: {
fontSize: ['first-letter'],
fontWeight: ['first-letter'],
color: ['first-letter'],
float: ['first-letter'],
lineHeight: ['first-letter'],
}
}
}
}
}
⚠️ 注意：float: ['first-letter'] 是必须项，否则文字不会环绕；lineHeight: ['first-letter'] 同样关键，否则放大后行高继承父级，首字“沉”不下去。
实际用法：不能只靠 class，必须补一行原生 CSS
Tailwind 扩展变体后，它只会生成类似 .first-letter\:float-left::first-letter { float: left; } 的规则，但前提是你的目标元素满足 ::first-letter 触发条件。因此你还得写一小段基础 CSS 来兜底：
- 确保段落是块级且干净：
<p class="first-letter:text-5xl first-letter:float-left first-letter:line-height-[0.7] first-letter:mr-2">今天...</p> - 在
css文件中加一句强制重置：p:first-child::first-letter { display: block; }（虽非必需，但能防某些旧版 Safari 异常） - 中文场景务必检查 HTML 是否有前置空格或换行：
<p>今天...</p>不能写成<p>\n今天...</p> - 若首字是标点（如《、【），
::first-letter会把它当首字符放大，建议 JS 检测后动态加no-dropcap类排除
响应式与兼容性绕不过的坑
想让首字在手机上缩到 2.5rem、桌面升到 4rem？别指望 first-letter:text-sm md:first-letter:text-4xl —— Tailwind 的响应式前缀对伪元素类不生效（v3.4 仍存在该限制）。正确做法是：
- 用
clamp()写在原生 CSS 里：font-size: clamp(1.5rem, 4vw, 3.5rem); - 或放弃响应式类，改用媒体查询包裹整条
::first-letter规则 - iOS Safari 在缩放 viewport 后偶有重绘失败，可在
@media (-webkit-min-device-pixel-ratio: 2)中降级为display: inline-block+vertical-align: top -
first-letter在 Flex/Grid 容器子元素中必然失效——哪怕只是给<p></p>加了flex父容器，也要改成block或用grid-template-columns: auto 1fr模拟布局
真正难的不是配出那几行 class，而是确认 DOM 结构没被富文本编辑器悄悄塞进零宽字符，以及字体在放大后没糊成一片灰块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
