将 TailwindCSS 表单与 Blazor EditForm 结合使用不会删除 InputText 上的样式

问题描述

使用 Tailwind forms 时，我希望我的 <InputText /> 元素没有样式，但它保留了文本输入的原始样式。

如果我做类似的事情就可以了
<input type="text" name="client_name" id="client_name" class="block w-full sm:text-sm border-gray-300 rounded-md">

如何在使用 TailwindCSS 表单时去掉 <InputText /> 的内置样式？

解决方法

您需要添加一个 type="text"。

所以你会想要这样的东西：
<InputText type="text" id="client_name" @bind-Value="client.Name" class="block w-full sm:text-sm border-gray-300 rounded-md"/>

下面从@tailwindcss/forms 文档中解释的原因：

请注意，对于文本输入，您必须添加 type="text" 属性才能使这些样式生效。这是一个必要的权衡，以避免依赖过于贪婪的输入选择器和我们还没有解决方案的无意样式元素，例如 input[type="range"]。