Complemento de formularios

Ver como Markdown Editar en GitHub Documentación de 3843abd

@tailwindcss/forms es un port 1:1 del complemento oficial de formularios de PHP. Proporciona un restablecimiento predefinido para los controles de formulario —campos de texto, áreas de texto, menús desplegables, casillas y botones de opción— y les da una base coherente (restablece la apariencia, el borde, el relleno, el anillo de enfoque, el chevrón personalizado del menú desplegable y los iconos de casillas y botones de opción) que luego puedes sobrescribir con utilidades.

Uso

Carga el complemento con @plugin e importa la capa de utilidades:

PHP

use TailwindPHP\tw;

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

Estrategia

La opción strategy controla cómo se aplican los estilos:

Estrategia	Comportamiento
`base`	Aplica estilos globales a los elementos de formulario nativos mediante selectores como `[type='text']`, `textarea` y `select`.
`class`	Aplica estilos solo a las clases `form-*` explícitas y deja intactos los elementos sin clase.

Si se omite strategy, se aplican ambas estrategias: los elementos nativos reciben el restablecimiento base y las clases form-* también están disponibles. Elige una sola estrategia para excluir la otra:

CSS

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

Estrategia de clases

Con la estrategia class (o la predeterminada), aplica estas clases explícitamente a los elementos que quieras estilizar:

Clase	Elemento
`form-input`	Campos de entrada de texto
`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";
    '
);

Cada clase restablece la apariencia del control y define bordes, relleno y un anillo de enfoque; form-select añade una imagen de fondo con chevrón, y form-checkbox/form-radio añaden iconos para el estado marcado. Puedes sobrescribirlos con utilidades normales (por ejemplo, class="form-input rounded-lg border-gray-300").

Consulta Complementos para conocer la directiva @plugin y cómo cargar complementos.