Tailwind CSS 不支持 ::first-letter 伪元素的原子类，因其静态生成困难且易引发组合爆炸；需通过手写 CSS、启用 first-letter 变体或结合 group 使用，或改用 text-capitalize 等整词变换类。
tailwind css 本身不支持 ::first-letter 直接配置
Tailwind 默认的 typography 插件（@tailwindcss/typography）和核心工具类都不提供 first-letter 的原子类。你不会找到类似 first-letter:uppercase 或 first-letter:text-2xl 这样的类名——这不是遗漏，而是设计取舍：伪元素难以静态生成可靠工具类，且组合爆炸风险高。
用 group + group-first-letter 实现条件首字母样式
如果你的首字母大写需要配合特定上下文（比如段落开头、列表项首个字），最稳妥的方式是结合 group 和自定义插件或手动 CSS：
- 给容器加
group，再在内部用group-data-[state=first]:first-letter:uppercase类（需启用data-*变体） - 更常用的是直接写一行
class="group"，然后在src/styles.css中添加：
.group:first-letter {
text-transform: uppercase;
font-weight: bold;
margin-right: 0.1em;
}
注意：:first-letter 只对块级容器生效，所以确保目标元素是 <p></p>、<div class="group"> 等 display: block 元素。<h3>纯 Tailwind 方案：用 <code>text-transform 控制整词，而非仅首字母
如果只是想让「单词首字母大写」，而不是「段落第一个字母」，别用伪元素——改用原生 CSS 属性对应的 Tailwind 类：
-
capitalize→ 每个单词首字母大写（text-capitalize） -
uppercase→ 全大写（text-uppercase） -
lowercase→ 全小写（text-lowercase）
这些类直接映射到 text-transform，无兼容性问题，也无需额外配置。但它们作用于整个元素内容，无法单独拎出第一个字符做字体、颜色、大小等精细控制。
要真正定制首字母（如下沉、变色、加大），必须手写 CSS 并启用 first-letter 变体
若你确实需要首字母下沉（drop cap）、不同字体或边框，绕不开自定义样式。在 tailwind.config.js 的 theme.extend.extend 下添加：
module.exports = {
content: [...],
theme: {
extend: {
variants: {
extend: {
firstLetter: ['hover', 'focus'],
}
}
}
}
}
然后在 CSS 文件中写：
p:first-letter {
@apply text-3xl font-bold text-blue-700 float-left mr-2;
}
关键点：Tailwind 不会为你生成 first-letter: 工具类，但允许你用 @apply 复用已有类；同时务必确认浏览器支持——::first-letter 在 IE 中完全不可用，Safari 对某些嵌套结构支持不稳定。
真正麻烦的不是怎么写，而是什么时候该放弃 Tailwind 的原子类思维，老老实实写一句 p:first-letter。这往往发生在需要精确控制排版细节时，而这类细节恰恰是框架最难抽象的部分。
