表单插件

以 Markdown 格式查看在 GitHub 上编辑文档位置 3843abd

@tailwindcss/forms 是官方表单插件的 1:1 PHP 移植版。它为表单控件提供了一套固定的重置样式——文本输入框、文本区域、选择框、复选框和单选按钮——让它们拥有统一的基准样式（重置外观、边框、内边距、焦点环、自定义选择箭头以及复选框/单选按钮图标），之后你可以用工具类覆盖这些样式。

用法

使用 @plugin 加载插件，并导入工具层：

PHP

use TailwindPHP\tw;

$css = tw::generate(
    '<input class="form-input"><select class="form-select"></select>',
    '@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);

策略

strategy 选项控制样式的应用方式：

策略	行为
`base`	通过 `[type='text']`、`textarea` 和 `select` 等选择器，为原生表单元素全局设置样式。
`class`	仅为明确指定的 `form-*` 类设置样式，不影响未添加类的元素。

省略 strategy 时，会同时应用两种策略——原生元素会获得基准重置样式，也可以使用 form-* 类。设置单一策略即可禁用另一种：

CSS

@plugin "@tailwindcss/forms" {
    strategy: "class";
}

类策略

采用 class 策略（或使用默认设置）时，可将以下类显式应用到要设置样式的元素：

类	元素
`form-input`	类似文本框的输入元素
`form-textarea`	`<textarea>`
`form-select`	`<select>`
`form-multiselect`	`<select multiple>`
`form-checkbox`	`<input type="checkbox">`
`form-radio`	`<input type="radio">`

PHP

$css = tw::generate(
    '
        <input class="form-input">
        <textarea class="form-textarea"></textarea>
        <select class="form-select"></select>
        <select class="form-multiselect" multiple></select>
        <input type="checkbox" class="form-checkbox">
        <input type="radio" class="form-radio">
    ',
    '
        @plugin "@tailwindcss/forms" {
            strategy: "class";
        }
        @import "tailwindcss/utilities.css";
    '
);

每个类都会重置控件外观，并设置边框、内边距和焦点环；form-select 会添加箭头背景图，form-checkbox/form-radio 会添加选中状态图标。可使用常规工具类覆盖这些设置（例如 class="form-input rounded-lg border-gray-300"）。

有关 @plugin 指令和加载详情，请参阅插件。