Tailwind CSS 사용해보기
최근 Tailwind로 만들어진 사이트가 점점 많아지고 많은 인기를 얻고 있는데, 나도 실제로 사용해보고 좋았던 점을 공유해보려고 한다.
기존 CSS 프레임워크
Bootstrap이 처음 나온뒤로 정말 많은 CSS프레임웍이 나왔다. Bulma, Foundation, Primer, Spectre, … 등등. 이러한 CSS프레임웍은 적당히 이쁜 기본 테마를 제공해주는게 가장 큰 특징이다.
디자인이 거의 필요 없는 프로토타입을 만들때 빛을 발한다. 적당히 이쁜 버튼, 메뉴 등 디자인을 제공해주니까 엄청 좋다.
하지만, 커스텀 디자인을 적용하려고 하는 경우 CSS프레임웍은 오히려 걸림돌이 되버린다. CSS프레임웍에서 제공해주는 스타일을 수정하려면 일단 CSS 프레임웍 소스코드를 이해해야 한다.
아.. 그럼 그냥 걷어내고 바닥부터 시작하는게 낫겠다.
라는 생각이 든다.
Tailwind CSS
Tailwind CSS는 기존 CSS프레임웍과 다르게 utility class로 CSS를 작성할수 있게 해준다. 기존 프레임웍처럼 정해진 button, popup, menu, nav 등 클래스를 제공해주는게 아니라 css의 거의 1:1 매칭되는 클래스를 제공한다.
- .flex: display: flex;
- .pt-4 : padding-top: 1rem;
- .text-center : text-align: center;
이런식으로 padding, width, height, flex, max-width 등 우리가 css로 쓸수 있는 거의 모든걸 css 클래스 형태로 제공한다. 미리 정해진 .button 클래스를 사용하는게 아니라 아래와 같이 사용한다.
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Button text
</button>처음 보면 너무 길어서 이걸 읽고 수정할수 있을까? 하는 생각이 들긴 하는데 어느정도 익숙해지면 기존 css class를 만들어서 관리하는것 보다 훨씬 좋다.
- class이름을 굳이 지정할 필요가 없음.
- HTML 코드안에 포함되어 있으니 바로 수정하기 쉬움.
버튼을 넣을때마다 저렇게 긴 class를 반복해서 넣어야 할까? tailwind에서는 크게 두가지 방법으로 재활용을 제공한다. 첫번째는 자주 쓰는 class를 utility class로 정의할수 있게 해준다.
.btn {
@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}두번째로는 React와 같은 프레임웍을 사용하는 경우 button을 component로 만들면 되기 때문에 굳이 .btn과 같은 클래스를 정의할 필요가 없다.
Tailwind 의 장점
겉으로 보기엔 Tailwind css는 거의 생짜(primitive) CSS를 그대로 쓰는것과 별반 차이가 없어 보인다. 하지만 아래와 같은 장점이 있다.
- Reset이 기본으로 탑재(어떤 브라우져서든 동일한 결과를 내도록 CSS 초기화)
- Production에는 실제로 사용하는 css만 포함되어 작은 css파일을 유지 가능.
- shadow, round, space 등 꽤 긴 style을 짧게 표현 가능하여 생산성이 높음.
- responsive 스타일 적용하기 쉬움
- hover, focus 등 처리 가능
- animation 가능
Tailwind CSS JIT(Just in Time)
최근 새로 나온 JIT은 임의의 Text파일(html, javascript..)에서 빠른 속도로 포함해야 할 class를 찾아내어 결과 CSS를 생성하는 기능이다. 소스코드에 포함된 Tailwind CSS class이름을 찾아내어 결과 CSS에 포함시킨다.
- CSS 컴파일 속도 빠르다.
- 어떤 언어이든 Tailwind를 사용할수 있다.(Clojurescript, typescript, …)
- 커스터마이징을 할수 있다.(w-[100px])
나는 Clojurescript를 주로 사용하기 때문에 tailwind를 써볼 생각도 못했다가, JIT이 나오고 실제로 사용해 볼수 있었다.
Tailwind UI
Tailwind css자체는 기타 CSS프레임웍 처럼 기본 UI 스타일을 제공해주지 않는다. 대신 별도 사이트에서 Tailwind CSS를 사용하여 만든 UI 프리셋을 판매하고 있다.
Landing, Form, Navigation, Menu 등 다양한 Component로 만들어서 판매하고 있으며 한번 결제로 계속 무제한 사용할수 있다.
나는 가끔 취미 프로젝트 할때 쓸 심산으로 구매했다. 그리고 영어 회화 공부하는 사이트를 Tailwind로 한번 만들어봤다.
결론
Tailwind은 기존 프레임웍과 다르게 bottom-up 방식으로 css를 만들수 있는 프레임웍이다. IE11을 지원하지 않는게 단점이긴 하지만, 그외 단점은 아직까지 발견하지 못했다. Tailwind로 만들어진 사이트에서 CSS를 복사해오는게 엄청 쉬운데, 이것도 큰 장점이라고 볼수 있을것 같다.
다음 포스팅에는 Tailwind CSS를 Clojurescript 프로젝트에 어떻게 적용했는지 한번 공유해봐야 겠다.
