<p>Tailwind 的 text- 类不生效于 placeholder，因其仅作用于常规文本流，而 placeholder 属于 ::placeholder 伪元素，必须使用专用类如 placeholder:text-gray-400；若该类仍无效，主因是 content 配置未覆盖对应文件或自定义颜色配置错误。</p>
直接改 text-gray-400 不会影响 placeholder 颜色——Tailwind 的文字颜色类对 placeholder 完全无效，必须用专用工具类。
为什么 text- 类不生效？
Tailwind 默认只把 colors 映射到 color、background-color、border-color、ring-color 四类属性。placeholder 是伪元素内容，它走的是 ::placeholder 的样式链，不属于基础文本流，因此 text-gray-400 对它没作用。
你写的 text-gray-400 只会作用于 input 元素自身的文字（比如已输入的内容），而 placeholder 是独立渲染层，必须显式指定：
-
placeholder:text-gray-400—— 正确写法 -
placeholder:text-red-500—— 支持所有已配置的颜色名和深度值 -
placeholder:opacity-70—— 也可配合 opacity 工具类（但慎用，iOS Safari 对 opacity 支持不稳定）
为什么加了 placeholder:text- 还是没变色？
最常见原因是 Tailwind 没扫描到这个类名，导致生成的 CSS 中压根没有对应规则。这通常发生在：
立即学习“前端免费学习笔记（深入）”；
-
tailwind.config.js的content字段没覆盖实际写类名的文件（比如你在public/index.html里写了placeholder:text-slate-500，但content只配了./src/**/*.{js,ts,jsx,tsx}） - 用了
style scoped（Vue）或css modules（React），导致placeholder:工具类被作用域隔离，需用:deep(input::placeholder)或提至全局样式 - 自定义了
theme.extend.colors但删掉了默认 color palette（如移除了gray），而你又在用placeholder:text-gray-400—— 此时该类不会生成
验证方式：打开 DevTools，检查 input 元素上是否有 placeholder:text-gray-400 class，再看 computed 样式里是否出现了 ::placeholder { color: #94a3b8; }。如果没有，就是构建阶段漏掉了。
iOS Safari 和微信小程序里 placeholder 颜色完全不响应？
不是 Tailwind 的问题，是底层渲染机制限制：
- iOS Safari（尤其 15.4–16.x）只认
::-webkit-input-placeholder，且要求!important才能覆盖原生样式；Tailwind 的placeholder:工具类在这些环境下会被忽略 - 微信/支付宝小程序、uni-app 的
<input>组件根本不解析任何伪元素，::placeholder写了也白写
对应解法：
- 微信小程序：用
placeholder-style="color:#666"内联写死 - uni-app：
placeholder-class="ph-light"+ 全局.ph-light { color: #666; } - iOS Safari 兼容兜底：在全局 CSS 中补一条
input::-webkit-input-placeholder { color: #666 !important; }，并确保它在 Tailwind 生成的 CSS 之后加载
真正容易被忽略的是暗色模式下 placeholder 的“隐身”问题：有些 UI 框架会在 @media (prefers-color-scheme: dark) 里把 ::placeholder 设成 #000，而你的背景又是深色，结果文字就看不见了——得手动用 dark:placeholder:text-gray-500 覆盖，而不是依赖系统媒体查询自动切换。
