如何让输入框文本显示为大写但保持占位符为小写？

Tailwind自带的uppercase类会同时将输入文本和占位符转为大写，要实现输入文本显示大写但占位符不变的效果，可以用以下两种方式：

方法一：自定义Tailwind工具类 #

通过@layer utilities扩展Tailwind工具类，专门控制输入框的文本转换，同时重置占位符的样式：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<style>
@layer utilities {
  .input-uppercase {
    text-transform: uppercase;
  }
  .input-uppercase::placeholder {
    text-transform: none;
  }
}
</style>

<input
  class="input-uppercase"
  placeholder="Search Results..."
/>

使用.input-uppercase类后，输入的文本会自动显示为大写，而占位符保持原有大小写样式。

方法二：直接添加内联样式重置占位符 #

如果不想自定义工具类，也可以在输入框上直接添加内联样式，覆盖占位符的文本转换属性：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<input
  class="uppercase"
  placeholder="Search Results..."
  style="::placeholder { text-transform: none; }"
/>

注意事项 #

text-transform只是视觉层面的转换，输入框的实际值还是用户输入的原大小写。所以在处理表单数据时，需要调用.toUpperCase()方法将值转为大写，这种方式只需要执行一次，比在onChange事件中每次按键都转换更高效。

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