정글 입교 프로젝트를 마무리하며 발표를 진행했었는데 발표에서 ‘Tailwind를 쓰면서 느껴지신거 없으셨어요?’라는 질문을 받았다.
평소에 Tailwind를 잘 사용하지 않았었서 장점을 잘 모르고 있었는데, 기존에 애용하던 styled-component와 비교하며 답변을 드렸다.
답변을 들으시고 Tailwind의 가벼움에 대해서 잠깐 언급하셨는데, 이왕 힌트를 주신거 내친김에 알아보기로 했다.
나는 왜 그동안 Tailwind를 쓰지 않았지
짧게 써본 입장이지만 Tailwind를 쓰지않는 나름의 이유를 생각해보았다.
- 프리셋 클래스 명에 익숙하지 않으면 사용하기 까다롭다.
- Tailwind를 사용한 코드 특성상 가로로 길어지는 경우가 있어 어느정도 스타일을 파악하기 어렵다.
- 레이아웃을 구성하는 HTML과 CSS 코드가 혼재되어 있는 상태이다보니 더욱 HTML 코드를 파악하기 어렵게 느껴졌다.
- props를 전달하기 어렵다. → 이부분은 더 알아보지 않아서 잘못된 부분일 수 있다.
짧은 경험이고, 억까하는 부분이 있지만 나름대로 몇가지 꼽아보았다.
Tailwind는 어떤 장점이 있나
빠르다!
코드를 생산하는 시간자체가 줄어들기 때문에 개발 시간이 크게 단축된다. 그리고 모든 개발자의 고민인 변수명, 즉, 스타일을 위해 클래스명을 고민하지 않아도 된다.
그리고 다른 스타일 라이브러리에 비해 런타임 없이, 내장 스타일 클래스들을 제공하기 때문에 보다 빠른 빌드가 가능하다.
- before
<div class='disgusting_div'> <h1 id='disgusting_h1'>What a wonderful Header!</h1> </div>.disgusting_div { display: flex; justify-content: center; align-items: center; } #disgusting_h1 { font-size: 2rem; color: red; font-weight: bold; } - after
<div class='flex jusify-center items-center'> <h1 class='text-3xl font-bold text-red-600'>What a wonderful Header!</h1> </div>
일관성있다!
팀 내에서 보다 같은 디자인으로 만드는데 도움이 된다.
css내에서도 다양한 선택지(px vs rem, RGB vs Hex … )가 존재하고, 이것은 개인의 선호에 따를 수도 있다. Tailwind는 기존에 세팅되어있는 클래스 명으로 스타일을 구성하기 때문에 보다 많은 사람이 작업에 참여하더라도 일관성 있는 디자인을 유지할 수 있다.
뿐만아니라 global.css 파일을 통해 별도로 테마나 글꼴을 설정할 수 있게하여 장점을 부각시키고 있다.
/* tailwind.config.js */
theme: {
colors: {
primary: '#007bff',
secondary: '#6c757d',
},
fonts: {
sans: ['Roboto', 'sans-serif'],
},
}/* global.css */
.user_button {
background-color: var(--color-primary);
color: #fff;
}유연하다!
다양한 종류의 UI를 만드는데 사용할 수 있다. 특히 BootStrap의 문법(?)과 상호 방해하지 않도록 설계되어 보다 새로운 모습을 보여준다.
유지 관리성이 뛰어나다!
기존 CSS보다 유지 관리성이 뛰어나다. 사전 정의된 클래스 키워드를 바탕으로 코드를 관리하며, 연관 코드를 통해 직접 스타일을 확인할 수 있다.
그리고 제작된 클래스명 자체가 스타일을 설명하고 있기 때문에 해당 스타일을 이해하기 쉽다.( 나는 어렵던데…)
마치며
Tailwind의 장점을 정리하는 과정에서 프로젝트의 경험을 돌아보니 여기 나온 장점들을 조금씩 경험해보지 않았을까 하는 생각을 해봤다.
그리고 질문해주셨던 ‘왜 빠른가’에 대해서도 답을 찾은 것 같아 뿌듯하다.
많은 장점이 있는 스타일 툴인 것 같아 다음에 작은 프로젝트를 하게 된다면 진지하게 고려해보겠다.
그리고 요즘 다양한 CSS-in-JS 툴들이 등장하고 있던데 그것과 관련해서도 한번 공부해보고 비교해볼 필요가 있을 것 같다.
Reference
https://medium.com/readytowork-org/tailwind-css-pros-and-cons-f1a8fdb1fb47
