Tailwind appearance-none类对Select标签无效，如何移除下拉箭头？

• 先确认你给<select>标签正确加上了appearance-none类，示例代码：

<select class="appearance-none">
  <option>选项1</option>
  <option>选项2</option>
</select>

• 检查是否有样式冲突：打开浏览器开发者工具，选中这个select元素，查看appearance属性是否被划掉。如果是，说明有更高优先级的样式（自定义CSS、其他UI框架样式）覆盖了它，可以尝试：
  • 调整样式加载顺序，把Tailwind的CSS文件放在其他样式文件之后引入；
  • 临时用!important强制生效（不推荐长期使用，优先通过选择器优先级解决），比如class="appearance-none !important"；
  • 写自定义样式增强优先级，比如：

.select-no-arrow {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

然后给select标签加上select-no-arrow类。

• 检查Tailwind配置：如果使用的是v3版本，确认tailwind.config.js的corePlugins里没有禁用appearance模块，默认是启用的，若被禁用需手动开启：

module.exports = {
  corePlugins: {
    appearance: true,
  }
}

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