@tailwindcss/forms

这是一个提供基本表单样式重置的插件，使表单元素易于使用工具类进行覆盖。

安装

从npm安装插件：

npm install -D @tailwindcss/forms

然后将插件添加到你的tailwind.config.js文件中：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

基本用法

查看在线演示

你使用的所有基本表单元素现在都会有一些简单的默认样式，可以轻松地用工具类覆盖。

目前，我们为以下类型的表单元素添加了基本的实用工具友好的表单样式：

• input[type='text']
• input[type='password']
• input[type='email']
• input[type='number']
• input[type='url']
• input[type='date']
• input[type='datetime-local']
• input[type='month']
• input[type='week']
• input[type='time']
• input[type='search']
• input[type='tel']
• input[type='checkbox']
• input[type='radio']
• select
• select[multiple]
• textarea

每个元素都已被规范化/重置为简单的视觉一致风格，易于使用工具类进行自定义，即使是像<select>或<input type="checkbox">这样通常需要使用appearance: none重置并使用自定义CSS进行定制的元素：

<!-- 现在你可以实际自定义select元素的内边距了： -->
<select class="px-4 py-3 rounded-full">
  <!-- ... -->
</select>

<!-- 或者使用文本颜色工具类来更改复选框颜色： -->
<input type="checkbox" class="rounded text-pink-500" />

更多自定义示例和最佳实践即将推出。

使用类来设置样式

除了全局样式外，我们还生成了一组相应的类，可用于显式地将表单样式应用于元素。这在需要让非表单元素（如<div>）看起来像表单元素的情况下非常有用。

<input type="email" class="form-input px-4 py-3 rounded-full">

<select class="form-select px-4 py-3 rounded-full">
  <!-- ... -->
</select>

<input type="checkbox" class="form-checkbox rounded text-pink-500" />

以下是提供的form-*类的完整对照表，以供参考：

仅使用全局样式或仅使用类

尽管我们建议将此插件视为"表单重置"而非表单组件样式集合，但在某些情况下，我们的默认方法可能过于强硬，特别是在将此插件集成到现有项目中时。

如果同时生成全局（基础）样式和类不适合你的项目，你可以使用strategy选项将插件限制为仅使用其中一种方法。

// tailwind.config.js
plugins: [
  require("@tailwindcss/forms")({
    strategy: 'base', // 仅生成全局样式
    strategy: 'class', // 仅生成类
  }),
],

使用base策略时，表单元素会全局设置样式，不会生成form-{name}类。

使用class策略时，表单元素不会全局设置样式，而必须使用生成的form-{name}类来设置样式。