tailwindcss forms

@tailwindcss/양식

유틸리티를 사용하여 양식 요소를 쉽게 재정의할 수 있도록 양식 스타일에 대한 기본 재설정을 제공하는 플러그인입니다.

설치

npm에서 플러그인을 설치합니다.

 npm install -D @tailwindcss/forms

그런 다음 tailwind.config.js 파일에 플러그인을 추가합니다.

 // tailwind.config.jsmodule.exports = {
  주제: {// ...
  },
  플러그인: [require('@tailwindcss/forms'),// ...
  ],}

기본 사용법

라이브 데모 보기

사용하는 모든 기본 양식 요소에는 이제 유틸리티로 쉽게 재정의할 수 있는 몇 가지 간단한 기본 스타일이 있습니다.

현재 다음 양식 요소 유형에 대해 유틸리티 친화적인 기본 양식 스타일을 추가합니다.

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

모든 요소는 유틸리티를 사용하여 쉽게 사용자 정의할 수 있는 간단하고 시각적으로 일관된 스타일로 정규화/재설정되었습니다. <select> 또는 <input type="checkbox"> 와 같은 요소는 일반적으로 appearance: none 으로 재설정해야 하고 사용자 정의를 사용하여 사용자 정의해야 합니다. CSS:

 <!-- 이제 실제로 선택 요소의 패딩을 사용자 정의할 수 있습니다: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- 또는 텍스트 색상 유틸리티를 사용하여 체크박스 색상을 변경합니다. --><input type="checkbox" class="rounded text-pink-500" />

더 많은 사용자 정의 예시와 모범 사례가 곧 제공될 예정입니다.

클래스를 사용하여 스타일 지정

전역 스타일 외에도 양식 스타일을 요소에 명시적으로 적용하는 데 사용할 수 있는 해당 클래스 세트도 생성합니다. 이는 <div> 와 같은 비양식 요소를 양식 요소처럼 보이게 만들어야 하는 상황에서 유용할 수 있습니다.

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select rounded-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded text-pink-500" />

다음은 참조용으로 제공된 form-* 클래스의 전체 표입니다.

베이스	수업
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

전역 스타일만 사용하거나 클래스만 사용

이 플러그인을 양식 구성 요소 스타일 모음보다는 "양식 재설정"으로 생각하는 것이 좋지만 어떤 경우에는 기본 접근 방식이 너무 과중할 수 있습니다. 특히 이 플러그인을 기존 프로젝트에 통합할 때 더욱 그렇습니다.

전역(기본) 스타일과 클래스를 모두 생성하는 것이 프로젝트에서 제대로 작동하지 않는 경우 strategy 옵션을 사용하여 플러그인을 이러한 접근 방식 중 하나로 제한할 수 있습니다.

 // tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // 전역 스타일만 생성strategy: 'class', // 클래스만 생성
  }),],

base 전략을 사용할 때 양식 요소의 스타일은 전역적으로 지정되며 form-{name} 클래스는 생성되지 않습니다.

class 전략을 사용할 때 양식 요소는 전역적으로 스타일이 지정되지 않으며 대신 생성된 form-{name} 클래스를 사용하여 스타일이 지정되어야 합니다.