Приставка за формуляри

Преглед като 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 и подробности за зареждането.