# Complemento de formularios

`@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](https://tailwindphp.inline0.dev/es/docs/plugins) para conocer la directiva `@plugin` y cómo cargar complementos.