如何在Tailwind CSS中定位子元素input的::placeholder伪元素？

Tailwind自带针对::placeholder伪元素的工具类前缀，无需手动拼接复杂选择器，具体用法分以下场景：

单个input的占位符样式 #

直接在input元素上使用placeholder-*前缀的工具类即可，比如设置颜色、字体样式：

<input type="text" class="placeholder:text-gray-400 placeholder:italic placeholder:text-sm" placeholder="请输入内容">

对应的原生CSS等价代码：

input::placeholder {
  color: rgb(156 163 175);
  font-style: italic;
  font-size: 0.875rem;
}

父容器下所有input的统一占位符样式 #

方法1：自定义变体（推荐） #

在tailwind.config.js中扩展group变体，实现父容器控制子元素占位符样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他配置项...
  variants: {
    extend: {
      placeholderColor: ['group'],
      placeholderOpacity: ['group'],
      // 按需扩展其他需要的占位符样式变体
    },
  },
}

然后在父容器加group类，子input使用group-placeholder-*类：

<div class="group">
  <input type="text" class="group-placeholder:text-blue-500" placeholder="请输入内容">
  <input type="email" class="group-placeholder:text-blue-500" placeholder="请输入邮箱">
</div>

方法2：任意选择器写法（无需修改配置） #

用Tailwind的任意变体语法，直接通过父容器选择子input的占位符：

<div class="[&_input::placeholder]:text-red-500 [&_input::placeholder]:font-bold">
  <input type="text" placeholder="请输入内容">
  <input type="email" placeholder="请输入邮箱">
</div>

这里的[&_input::placeholder]等价于CSS中的.parent-class input::placeholder。

你之前写法的问题 #

你尝试的[&>input]:placeholder:(target)写法存在两处错误：

• Tailwind的placeholder-*是专属工具类前缀，不需要和:拆分组合
• 任意选择器需要把完整的伪元素选择器放在方括号内，不能拆分写法

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