폼 플러그인

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 지시문과 로드 방법은 플러그인을 참조하세요.