Tailwind CSS 4.0 不内置 caret-color 工具类，需在 theme.extend 中定义并手动编写带 -webkit-caret-color 的 utilities 规则，且不继承 text 颜色、不响应 dark 模式，移动端需注意 iOS 字体大小和布局限制。
直接用 caret-color 类名？Tailwind 默认不提供
Tailwind CSS 4.0（2026 年稳定版）仍**不内置 caret-color 工具类**。你写 class="caret-red-500" 或 caret-blue 不会生效——这不是配置漏了，是官方明确未实现的属性。想用，必须手动扩展。
如何在 tailwind.config.js 中安全添加 caret-color
推荐在 theme.extend 下注入，避免覆盖默认行为：
module.exports = {
theme: {
extend: {
caretColor: {
primary: '#007bff',
success: '#4ecdc4',
danger: '#ff6b6b',
dark: '#6a99ff',
}
}
}
}
然后在 CSS 中补全前缀和基础规则（Tailwind 不生成 -webkit-caret-color）：
@layer utilities {
.caret-primary { caret-color: theme('caretColor.primary'); -webkit-caret-color: theme('caretColor.primary'); }
.caret-success { caret-color: theme('caretColor.success'); -webkit-caret-color: theme('caretColor.success'); }
.caret-danger { caret-color: theme('caretColor.danger'); -webkit-caret-color: theme('caretColor.danger'); }
}
- 必须同时写
caret-color和-webkit-caret-color：Safari ≤14.1 仅认后者，新版 Chrome/Firefox 忽略后者但无副作用 - 别用
@apply在组件内动态拼接：Tailwind 的 JIT 模式不支持运行时解析theme()函数 - 深色模式需额外媒体查询，不能靠
dark:caret-dark自动切换——caret-color不响应prefers-color-scheme的 class 切换
为什么 text-red-500 不能间接控制光标颜色
caret-color 不继承，也不响应 currentColor。即使你给 input 加了 text-red-500，光标仍为系统默认色。这是常见误解的根源。
-
color: red确实会让光标变红（因部分浏览器继承），但会连带改文字色，不可控 -
caret-color: currentColor在 Safari 16+ 和 Firefox 120+ 中表现不稳定，iOS 上常退为灰色 - 密码框
input[type="password"]在 Safari 15–16.3 有渲染 bug，设caret-color可能导致卡顿或闪退，建议直接跳过该类型
移动端表格中 input 的光标失效？检查这三点
在 Tailwind 构建的响应式表格里，caret-color 容易“消失”，不是类没加对，而是被底层限制压制：
- iOS Safari 要求
font-size≥ 16px 才认caret-color：哪怕你用了text-sm（对应 0.875rem），也得强制覆盖text-base或加text-[16px] - 如果
input嵌在td里且设置了flex/grid布局，可能触发 iOS 的“缩放保护”，需加touch-action: manipulation缓解 - 安卓 WebView（尤其 Android 12 以下）可能完全忽略
caret-color，此时 fallback 方案只能是禁用 autofill + 强化focusoutline
真正难处理的不是怎么写，而是光标、输入文字、背景三者在不同渲染层里各自为政——你调得再准，软键盘一弹，Safari 就可能重置一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
