tailwind css 不提供 ::first-letter 工具类是设计取舍而非遗漏；需通过 @layer utilities 自定义类或插件实现，注意仅对块级元素生效、受空白符/标点/父级样式影响；替代方案有 capitalize（局限大）或显式包裹首字（更可控、支持响应式与 js 操作）。
tailwind css 里没有 first-letter 工具类，得手写 CSS
Tailwind 默认不提供 ::first-letter 相关的原子类，这不是遗漏，而是设计取舍——伪元素难以可靠地抽象成响应式、可组合的工具类。如果你看到某篇文章说“用 first-letter 类就能实现”，那大概率是自定义插件或误传。
实际做法是：在 tailwind.config.js 的 theme.extend.typography 或 plugins 中注入样式，或者直接在 @layer utilities 里定义：
@layer utilities {
.first-letter-cap {
&::first-letter {
text-transform: uppercase;
font-weight: 600;
}
}
}
然后在 HTML 中使用：<p class="first-letter-cap">hello world</p>。注意：该选择器只对块级元素生效，<span></span> 上加无效。
::first-letter 的兼容性与常见失效原因
不是所有字符都能被 ::first-letter 捕获。它只匹配“排版意义上的首字”，受 Unicode 分段规则和浏览器渲染影响。以下情况会失效：
- 元素开头有空白符（空格、换行、
- 首字符是标点（如
"、（、「）——部分浏览器不将其视为“字母”而跳过 - 父元素设置了
font-size: 0或visibility: hidden——伪元素继承计算值，可能被压制 - 使用了
text-transform: capitalize在父级——会干扰::first-letter的独立控制
替代方案：用 text-transform: capitalize 更简单但有局限
如果只是想让每个单词首字母大写，capitalize 是最轻量的选择：
<p class="capitalize">hello world</p> <!-- → "Hello World" -->
但它不等于 ::first-letter：
-
capitalize作用于所有单词，无法只修饰第一个字 - 对中文、日文等无“单词分隔”的语言基本无效（不会触发任何变化）
- 无法单独设置首字的
font-size、color或margin
所以真要突出第一字（比如文章导语的“第”字放大加粗），还是得回到 ::first-letter + 自定义类。
需要动态控制时，别用伪元素，改用 HTML 结构拆分
如果首字要响应不同状态（比如 dark mode 下颜色不同、或 JS 控制显隐），伪元素会很麻烦——它无法被 JS 直接选中或添加 class。这时候更稳妥的做法是显式包裹：
<p><span class="first-letter" aria-hidden="true">H</span>ello world</p>
再配合 Tailwind 工具类或自定义样式：
.first-letter {
@apply text-2xl font-bold text-gray-800 dark:text-gray-200;
}
这样既保持 Tailwind 的响应式能力，又避免伪元素的不可控性。尤其在 SSR 或 hydration 不稳定时，结构化方案容错率高得多。
真正容易被忽略的是：伪元素的样式优先级常被低估，一旦和其他 class 冲突（比如同时用了 text-sm 和 ::first-letter），得靠 specificity 或 !important（不推荐）来解决——不如一开始就用结构化方式把控制权拿回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
