tailwindcss forms

@tailwindcss/表格

该插件提供表单样式的基本重置，使表单元素易于使用实用程序覆盖。

安装

从 npm 安装插件：

 npm install -D @tailwindcss/forms

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

 // tailwind.config.jsmodule.exports = {
  主题： {// ...
  },
  插件: [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 class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- 或者使用文本颜色实用程序更改复选框颜色：--><input type="checkbox" class="rounded text-pink-500" />

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

使用类来设计样式

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

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select rounded-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded text-pink-500" />

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

根据	班级
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

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

尽管我们建议将此插件视为“表单重置”而不是表单组件样式的集合，但在某些情况下，我们的默认方法可能过于严厉，尤其是在将此插件集成到现有项目中时。

如果生成全局（基本）样式和类不能很好地适应您的项目，您可以使用strategy选项将插件限制为仅使用其中一种方法。

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

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

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