Плагин форм

Просмотреть как 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 и загрузке плагинов.