Wtyczka formularzy

Wyświetl jako Markdown Edytuj w GitHub Dokumentacja: 3843abd

@tailwindcss/forms to wierny port 1:1 PHP oficjalnej wtyczki formularzy. Zapewnia określony reset kontrolek formularza — pól tekstowych, obszarów tekstowych, list wyboru, pól wyboru i przycisków opcji — nadając im spójny wygląd bazowy (reset wyglądu, obramowanie, dopełnienie, obwódka fokusu, własna strzałka listy wyboru oraz ikony pól wyboru i przycisków opcji), który można następnie nadpisać narzędziami.

Użycie

Wczytaj wtyczkę za pomocą @plugin i zaimportuj warstwę narzędzi:

PHP

use TailwindPHP\tw;

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

Strategia

Opcja strategy określa sposób stosowania stylów:

Strategia	Działanie
`base`	Stylizuje globalnie natywne elementy formularzy za pomocą selektorów takich jak `[type='text']`, `textarea` i `select`.
`class`	Stylizuje tylko jawnie wskazane klasy `form-*`, pozostawiając elementy bez klas bez zmian.

Gdy pominięto strategy, stosowane są obie strategie — natywne elementy otrzymują reset bazowy, a klasy form-* są również dostępne. Wybierz jedną strategię, aby wyłączyć drugą:

CSS

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

Strategia klas

Przy strategii class (lub domyślnej) jawnie dodaj te klasy do elementów, które chcesz stylizować:

Klasa	Element
`form-input`	Pola tekstowe i podobne
`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";
    '
);

Każda klasa resetuje wygląd kontrolki i ustawia obramowanie, dopełnienie oraz obwódkę fokusu; form-select dodaje strzałkę jako obraz tła, a form-checkbox/form-radio dodają ikony zaznaczenia. Nadpisz dowolny z tych stylów zwykłymi narzędziami (na przykład class="form-input rounded-lg border-gray-300").

Zobacz Wtyczki, aby poznać dyrektywę @plugin i szczegóły wczytywania.