text-gray-700 默认对应 #37414f，是 Tailwind 主题配置中 gray 色系的第 7 档深灰色，数字越大颜色越深，不等同于浏览器原生 gray 关键词。
text-gray-700 这类类名到底对应什么颜色值
Tailwind 的 text- 类不是随意命名的，每个都映射到 theme.colors 配置里的具体值。比如 text-gray-700 默认对应 #37414f（深灰），而 text-blue-500 是 #3b82f6。它不等于原生 CSS 的 color: gray 或 color: blue —— 那些是浏览器默认关键词，语义模糊、不可控。
常见错误是以为 text-red-500 就是“红色”，结果在暗色模式下看不清，或和设计稿色值对不上。真正要做的，是查你项目里 tailwind.config.js 的 theme.extend.colors，确认当前用的是默认调色板还是自定义过。
- 默认 50–900 共 10 档，数字越大通常越深（
gray-50是浅灰，gray-900是近黑） - 像
text-current这种特殊值，取的是父元素的color计算值，适合继承上下文色，但别指望它自动适配主题切换 - 如果设计稿给的是十六进制色值（如
#1e40af），别硬凑blue-800，直接加进配置或用text-[#1e40af]（需启用 JIT 模式）
为什么 text-emerald-400 在 Safari 里显示偏淡
这不是 Tailwind 的 bug，而是 Safari 对 CSS 自定义属性（--tw-text-opacity）的解析存在兼容性差异，尤其在旧版或某些渲染路径下，text-emerald-400 生成的 color: rgb(72 187 120 / var(--tw-text-opacity)) 可能被降级处理，导致透明度没生效、颜色发灰。
使用场景：你在按钮文字上用 text-emerald-400，Chrome 正常，Safari 看起来像 emerald-300。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：打开 DevTools，检查 computed 样式里的
color值，对比 Chrome/Safari 是否一致 - 临时绕过：改用不带 opacity 的写法，比如
text-emerald-500（更饱和）或显式写text-[#059669] - 根因解决：确保
tailwind.config.js中content路径包含所有用到颜色的文件，否则 JIT 可能漏掉某些 class，导致 fallback 到未优化的规则
text-opacity-70 和 text-gray-700 的 opacity 机制完全不同
text-opacity-70 是一个独立的 utility，它只设置 --tw-text-opacity: 0.7，不会改变基础色；而 text-gray-700 是完整色值 + 内置 opacity（默认为 1）。两者叠加时，opacity 会相乘，容易造成意外变淡。
典型错误现象：写了 text-gray-700 text-opacity-70，结果文字几乎看不见——因为 gray-700 已含 --tw-text-opacity: 1，再叠一层 0.7，最终是 0.7 * 1 = 0.7，但开发者误以为只是“加一层半透”。
- 正确组合方式：如果真要微调不透明度，优先用
text-[#37414f]/70（JIT 支持的 color/alpha 语法），语义清晰且不冲突 -
text-opacity-类只应在需要动态控制透明度（比如配合 hover 或 js 切换）时谨慎使用 - 注意：
text-opacity-对text-inherit或text-current无效，因为它们不触发 Tailwind 的 color 插入逻辑
如何让 text-slate-600 在暗色模式下自动变亮
Tailwind 本身不自动切换文字色，text-slate-600 在 light/dark 模式下始终是同一个色值（#475569）。所谓“自动变亮”，必须靠 dark: 前缀手动声明。
使用场景：导航栏文字在白天用 text-slate-600，夜间希望变成 text-slate-200（浅灰）。
- 写法是
text-slate-600 dark:text-slate-200，不是dark:text-slate-600（那是反向操作） - 确保已启用
darkMode: 'class'或'media'，并在根元素加darkclass 或依赖系统偏好 - 容易忽略的点：如果你用的是自定义颜色（比如
theme.extend.colors.slate），必须同时为 light 和 dark 两套定义好，否则dark:text-slate-200可能找不到对应值而回退到默认slate
事情说清了就结束
