Tailwind CSS!
Tailwind CSS란 무엇인가?
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.
Tailwind CSS의 장점
Utility-First의 편리함과 빠른 개발
Utility-First 컨셉은 Tailwind CSS의 메인 컨셉이자 가장 큰 장점이다. 이 글에서도 볼 수 있듯 Utility-First 덕에 매우 쉽고 빠르게 원하는 디자인을 개발할 수 있게 된다.
스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다. 그 덕분에 HTML-CSS를 왔다갔다하며 시간을 쓰거나 위의 이미지처럼 화면을 분할해서 사용하지 않아도 된다. 또 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다.
또 마크업을 하다 보면 반드시 겪게 되는 고퉁 중에 하나는 랩핑하는 태그의 클래스명을 고민하는 일이다. BEM, OOCSS 등의 방법론이 나올 정도로 클래스명 짓는 일은 까다롭다. 어렵사리 규칙을 잘 정해도 그리 효율적이지도 않은 경우가 많다. Tailwind CSS를 사용하면 랩핑 태그의 클래스명을 사용할 일이 거의 없으므로 container, wrapper, inner-wrapper와 같은 클래스명을 고민하지 않아도 된다.
실제로 이번에 블로그를 개발할 때 styled-components를 사용했을 때보다 Tailwind CSS를 사용했을 때 2배 이상 빨랐다. Tailwind CSS를 사용하여 블로그 하나를 하루 만에 모두 개발할 수 있었다.
Tailwind CSS의 단점
못생긴 코드
<div
class="bg-primary-darken text-bold text-white inline-flex items-center p-4 rounded shadow-md"
>
Not Pretty Code 😵
</div>
HTML
복사
아무래도 가장 큰 단점은 코드가 못생겼다는 점이다. 아마 Tailwind CSS에서 가장 큰 진입장벽이 아닐까 싶다 
직관적이라고 할 수도 있겠지만 예쁘다고 말하기는 어렵다.
직관적이라고 할 수도 있겠지만 예쁘다고 말하기는 어렵다.초반 클래스명 러닝 커브
초반에는 각 스타일의 클래스명을 익히느라 개발하는 내내 문서를 참고해야 하는 번거로움이 있다. 그래도 대부분의 클래스명이 기존 CSS 속성이나 속성값과 비슷한 경우가 많고 자동완성을 지원하는 Intelli Sense 플러그인이 있어서 금방 익숙해지기는 한다.
JavaScript 코드 사용 불가
클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있지만 styled-components와 같이 JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요하다. 그러나 나는 이렇게 특정 변수값을 활용하여 스타일링을 하는 경우가 일관된 디자인을 해치는 경우가 많기에 지양하는 편이다. 실제로 블로그를 구현할 때 이러한 설정이 필요한 경우가 한 번도 없었다.
HTML와 CSS 코드 혼재
Tailwind CSS의 단점을 꼽을 때 HTML와 CSS의 관심사 분리가 이루어지지 않았다고 언급되는 경우가 있다. 그래서 단점의 한 꼭지로 넣었긴 했으나 개인적으로 HTML와 CSS를 다른 관심사로 분리할 수 있는가에 대한 의문이 남아있기는 하다.
