如何在Tailwind CSS中仅设置输入框占位符为斜体？

核心实现方式 #

直接使用Tailwind内置的placeholder:变体修饰符，搭配italic工具类即可，这是完全符合Tailwind设计规范的原生实现，完全可以替代你之前编写的Webkit内核专属占位符原生CSS，无需在全局样式表中自定义规则。
示例代码：

<input
  type="text"
  placeholder="请输入对应内容"
  class="w-full px-3 py-2 border border-gray-300 rounded placeholder:italic"
>

方案优势 #

• 自动覆盖跨浏览器兼容场景：该修饰符会自动将样式应用到所有浏览器对应的占位符伪元素上，无需手动维护Webkit、Firefox、旧版Edge等不同内核浏览器的多套占位符选择器规则
• 作用范围精准隔离：样式仅作用于占位符文本，完全不会影响用户在输入框中实际输入的正文内容，从根源上避免样式作用错位的问题
• 扩展灵活：可以根据需求在该变体后追加其他占位符专属样式，比如placeholder:text-gray-400、placeholder:text-sm等，所有配置都可以直接写在元素类名中，符合Tailwind的原子类使用习惯

注意事项 #

不要直接在类名中写不带前缀的italic，否则会让输入框内所有文本（包括用户实际输入的内容）都应用斜体效果，必须给样式加上placeholder:前缀限定作用域。

内容的提问来源于stack exchange，提问作者Manoj Singh