TailwindCSS 커스텀 폼 free

2019-09-23

아마 이 뉴스레터를 꾸준히 구독하고 계신 분들이라면 이제 TailwindCSS라는 이름이 꽤 익숙하시리라 생각합니다. TailwindCSS는 라라벨을 메인으로 다루는 라라벨 뉴스에도 자주 등장합니다. 그만큼 라라벨 진영에서 인기가 높다고 볼 수 있겠죠. 오늘도 라라벨 뉴스에 TailwindCSS와 관련된 튜토리얼이 나와서 반가운 마음에 소개 합니다.


TailwindCSS는 굉장히 쓰기 쉽지만 '기본'으로 제공하는 것이 없어서 저는 조금 아쉬운 점이 있었습니다. TailwindCSS는 기본적으로 모든 스타일을 무효화한 상태로 시작하게 합니다. 심지어 H 태그도 기본 스타일링이 제공되지 않아서 h1이나 h6나 p나 다 폰트 크기가 같을 정도입니다.


당연히 폼도 전혀 기본 스타일링이 되어 있지 않습니다. 그래서 저 같은 경우는 TailwindCSS 홈페이지에서 폼이 나오는 부분을 찾아서 크롬 개발자 도구를 이용해서 스타일을 따오는 벙식을 사용했었습니다.



썩 유쾌한 방법은 아니죠 :)


Tailwind CSS Custom Forms라는 플러그인을 사용하면 이 문제를 어느 정도 해결할 수 있습니다. 이 플러그인은 form-input 같은 간단한 클래스 하나만 추가해도 어느 정도 보기 좋게 스타일링된 폼을 제공합니다.


이 플러그인의 목적은 완벽하게 아름다운 폼을 제공하는 것이 아니라 기본 TailwindCSS 보다 더 나은 시작점을 제공하는 것입니다.


설치


npm install @tailwindcss/custom-forms --save-dev

설정


tailwind.config.js 파일의 plugins 항목에 아래와 같이 입력합니다.


// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/custom-forms'),
]
}

tailwind.config.js 파일이 없으신 분들은 프로젝트 루트 디렉터리에서 아래 명령어을 실행하면 tailwind.config.js 파일이 생성됩니다.


./node_modules/.bin/tailwind init

컴파일


에셋 컴파일을 하면 플러그인이 적용됩니다.


npm run dev

사용


인풋 엘리먼트에 플러그인이 제공하는 클래스(form-input, form-textarea, form-select, form-multiselect, form-checkbox, and form-radio.)를 추가해주면 됩니다. 추가적으로 꾸미고 싶으면 앞서 언급한 클래스 다음에 원하는 클래스를 원하는 만큼 추가하면 됩니다. 공식 페이지의 예제를 직접 보시면 바로 이해가 되실 겁니다.


기본 스타일을 적용해주는 것 뿐만 아니라 기본 스타일을 커스터마이징하기 편하게 해주는 방법을 제공합니다. 이것도 필요시 공식 페이지에서 사용법을 확인하세요.


마치며


TailwindCSS를 써보신 분들이라면 아마 바로 설치하러 가실거라고 생각이 듭니다. 아직 TailwindCSS를 안써보신 분이라면 나중에 꼭 기억했다가 활용하시기 바래요.


1일 1식 라라벨 58호

2019년 9월 24일


이현석

메쉬 코리아 개발자. 바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.