Tailwind 外观 - 无类不适用于数字类型的输入字段

Question

我正在尝试删除原生带有数字输入字段的箭头/旋转器。据我所知，按照此处的文章，通过设置-webkit-appearance和 可以轻松完成此操作-moz-appearance。话虽如此，这是我当前使用名为 的 CSS 类的实现.no-spin。

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance: textfield !important;
}

<div>
  <label>Number Input Field w/o spinner</label>
  <input class="no-spin" type="number">
</div>
<div>
  <label>Number Input Field w/ spinner</label>
  <input type="number">
</div>

然而，由于我使用的是 Tailwind，所以我正在寻找一种可能的解决方案，我不必像项目的其他组件一样诉诸 CSS 类。我已经尝试使用Tailwind 文档appearance-none建议的类，但它对我不起作用。

Answer 1

是的，您可以添加[appearance:textfield]它将生成为：

.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
          appearance: textfield;
}

这应该够了吧

.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
          appearance: textfield;
}