capitalize 用于每个单词首字母大写（如“hello world”），uppercase 则全部转为大写（如“hello world”）；前者适用于标题、导航等需保持单词结构的场景，后者多用于强调标语或按钮文字；响应式中可用 capitalize md:uppercase 实现小屏首字母大写、中屏起全大写。
直接用 capitalize 类即可实现“每个单词首字母大写”，而 uppercase 是全部转大写——两者语义和效果完全不同，不能混用。
什么时候该用 capitalize 而不是 uppercase
当你需要保持单词结构、仅提升可读性时，比如标题、导航项、卡片标签等场景。capitalize 会把 "hello world" 变成 "Hello World"；uppercase 则变成 "HELLO WORLD"，视觉上更强势、更像强调标语或按钮文字。
-
capitalize按空格或连字符（-、_）切分单词，只大写每个片段首字符，其余小写 -
uppercase不区分单词，整段字符串无条件转为大写，包括已有的大写字母、数字、符号都不变 - 若原始文本含驼峰命名（如
"userName"），capitalize无法识别，仍输出"Username"（因为只看空格分隔）
capitalize 在响应式断点下怎么重置
常见需求是：移动端用 capitalize，桌面端改用全大写强调。这时不能叠加写 md:uppercase capitalize，因为后声明的类会覆盖前一个——Tailwind 的 CSS 规则顺序决定了最终生效的是 md:uppercase（在中屏及以上生效），但小屏仍保留 capitalize。
- 正确写法：
capitalize md:uppercase—— 小屏用首字母大写，中屏起全部大写 - 若想反向（默认大写，小屏还原），写
uppercase sm:normal-case，其中normal-case对应text-transform: none - 注意：
normal-case不是“转小写”，它只是取消所有转换，还原原始大小写
为什么 capitalize 没生效？几个典型原因
多数是 HTML 内容本身或 CSS 层叠干扰导致，不是 Tailwind 类写错了。
- 原始文本已含大写字母（如
"iPhone"），capitalize不会把它改成"Iphone"—— 它只处理首字符，不强制其余为小写 - 父元素设置了
text-transform: uppercase，子元素即使加capitalize也无效（CSS 继承+层叠优先级问题） - 用了自定义字体或 Web Font，某些字体对
text-transform支持不完整（尤其旧版 Safari） - Tailwind 配置里禁用了
textTransform插件（检查tailwind.config.js中corePlugins.textTransform是否为false）
需要“仅首单词首字母大写”怎么办
Tailwind 原生没有 first-word-capitalize 这种类，capitalize 总是作用于所有单词。真有这需求，得靠 JS 或额外 CSS：
- 纯 CSS 方案（有限制）：
::first-letter伪元素只能控制第一个字母，且不适用于多词混合场景（如"user name"→"User name"） - JS 辅助（推荐）：在数据层处理，例如 React 中用
text.charAt(0).toUpperCase() + text.slice(1)，避免样式层承担逻辑 - 不要试图用
capitalize+lowercase组合“模拟”，它们不正交，叠加后行为不可控
真正容易被忽略的是：大小写转换是纯显示层操作，不影响 DOM 文本内容或表单提交值。如果后续要校验、搜索或 API 传参，别依赖 capitalize 的视觉结果做逻辑判断。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
