tailwind css 不提供 ::first-letter 原子类是设计选择而非 bug；实现首字母下沉等精细控制需手写 css，而单词首字母大写可用 capitalize 类快速解决。
Tailwind CSS 本身不提供 ::first-letter 的原子类，这不是 bug，而是设计选择——伪元素无法可靠生成响应式、可组合的工具类。真要实现「段落首字母下沉+加粗+变大」这类精细控制，必须手写 CSS；如果只是让每个单词首字母大写，直接用 capitalize 就够了。
用 capitalize 类快速实现单词级首字母大写
这是最轻量、零配置、无兼容性问题的方案，适用于标题、导航项、卡片描述等场景。
-
capitalize作用于整个元素内容，把每个单词的首字母转为大写，其余字母不变形（比如"hello world"→"Hello World"） - 支持响应式前缀，例如
md:capitalize只在中屏及以上生效 - 它不区分语言，对中文无效（中文无“首字母”概念），对带连字符的英文词（如
well-known）可能只大写第一个部分 - 不能单独控制首字母的字体大小、颜色或间距，纯样式层面的“首字突出”做不到
需要真正控制段落首个字符？得手写 ::first-letter
当你要做下沉首字（drop cap）、首字母加边框、或和 group 配合做条件样式时，绕不开自定义 CSS。
- 必须确保目标元素是块级（
<p></p>、<div class="...">），行内元素（如 <code><span></span>）上无效 - 文本开头不能有空格、换行或 Unicode BOM，否则浏览器可能跳过首字符
- 父级若设了
font-size: 0或visibility: hidden，::first-letter会继承并失效 - 推荐写法：在
src/styles.css或@layer utilities中定义
@layer utilities {
.first-letter-cap::first-letter {
text-transform: uppercase;
font-weight: 700;
font-size: 2.5rem;
line-height: 1;
float: left;
margin-right: 0.2em;
}
}
然后在 HTML 中使用：<p class="first-letter-cap">hello world</p>
想用 group + 条件首字母样式？注意变体需手动启用
如果你的首字母样式依赖上下文（比如只在某个容器的首个段落生效），group 是比全局类更可控的方式，但默认不带 first-letter 变体。
- 先在
tailwind.config.js的variants中启用：
module.exports = {
variants: {
extend: {
textTransform: ['group-hover', 'group-focus'],
// 注意：first-letter 不在默认变体列表里，需插件或手写
}
}
}
- 更实际的做法是：给容器加
group，再在 CSS 中写.group > p:first-of-type::first-letter，避免依赖未启用的变体 - 不要指望
group-first-letter:uppercase这种类名存在——它不会被 Tailwind 解析
真正难的不是写那几行 CSS，而是意识到：只要涉及 ::first-letter，你就已经脱离了 Tailwind 的原子类舒适区。它不帮你封装，因为封装不可靠；你得自己处理空白符、标点边界、字体继承这些细节。别试图“用 Tailwind 写完所有样式”，该手写就手写。
