# Lomakelaajennus

`@tailwindcss/forms` on virallisen lomakelaajennuksen 1:1-porttaus PHPlle. Se tarjoaa valmiin nollauksen lomakeohjaimille — tekstikentille, tekstialueille, valintaluetteloille, valintaruuduille ja valintapainikkeille — ja saattaa ne yhtenäiseen perustilaan (ulkoasun nollaus, reunus, sisennys, kohdistusrengas, mukautettu valintaluettelon nuoli sekä valintaruutujen ja valintapainikkeiden kuvakkeet). Voit tämän jälkeen korvata tyylit apuohjelmilla.

## Käyttö

Lataa laajennus komennolla `@plugin` ja tuo apuohjelmakerros:

```php
use TailwindPHP\tw;

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

## Strategia

`strategy`-asetus määrittää, miten tyylejä käytetään:

| Strategia | Toiminta |
|----------|----------|
| `base` | Tyylittelee natiivit lomake-elementit yleisesti valitsimilla, kuten `[type='text']`, `textarea` ja `select`. |
| `class` | Tyylittelee vain erikseen määritetyt `form-*`-luokat, eikä vaikuta luokittelemattomiin elementteihin. |

Kun `strategy` jätetään pois, käytössä ovat **molemmat** strategiat: natiivit elementit saavat perustason nollauksen ja myös `form-*`-luokat ovat käytettävissä. Voit poistaa toisen käytöstä valitsemalla vain yhden strategian:

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

## Luokkiin perustuva strategia

Käytä `class`-strategiassa (tai oletusasetuksella) näitä luokkia erikseen niissä elementeissä, joita haluat tyylitellä:

| Luokka | Elementti |
|-------|---------|
| `form-input` | Tekstimäiset syötekentät |
| `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";
    '
);
```

Kukin luokka nollaa ohjaimen ulkoasun ja määrittää reunukset, sisennyksen ja kohdistusrenkaan; `form-select` lisää taustakuvan nuolelle, ja `form-checkbox`/`form-radio` lisäävät kuvakkeet valittuun tilaan. Voit korvata minkä tahansa tyylin tavallisilla apuohjelmilla (esimerkiksi `class="form-input rounded-lg border-gray-300"`).

Katso sivulta [Laajennukset](https://tailwindphp.inline0.dev/fi/docs/plugins) tiedot `@plugin`-direktiivistä ja lataamisesta.