Tailwind
저는 프론트 CSS를 적용 할 때 거의 대부분의 프로젝트에서 Bootstrap을 사용하는데 찾아보니 이런것도 있다고 합니다.
우리는 클래스명을 작명하고 CSS파일 혹은 style 태그 내부에서 해당 클래스명으로 여러 스타일을 적용합니다. 이런 행위 외에 유틸리티 클래스를 써서 스타일을 적용하는 방법도 있습니다. 유틸리티 클래스란 마진, 폰트사이즈 등 자주 쓰는 CSS코드를 미리 만들어 놓은 클래스로써 필요할 때 마다 클래스를 통해 사용합니다. 보통 유틸리티 클래스를 단독으로 쓰기 보다는 여러 개의 유틸리티 클래스를 함께 사용해야지 의미있는 스타일링을 할 수 있습니다.
<div class="p-2">
<p class="mt-3 mb-3"> 마진 위아래로 3 </p>
</div>
위의 예시에서 p-2, mt-3, mb-3 처럼 padding과 margin 값을 지정한 CSS코드를 미리 만들어 사용하는 것입니다.
이런식으로 동작하는 유틸리티 클래스를 엄청나게 많이 모아놓은 CSS프레임워크가 Tailwind 입니다. Tailwind 는 다양한 유틸리티 클래스를 제공합니다. 물론 Bootstrap같은 기존의 css 프레임워크에서도 유틸리티 클래스를 제공합니다. 큰 차이점은 기존 CSS라이브러리에서는 button, card 같은 완성된 컴포넌트 수준의 클래스가 주가 되며 유틸리티 클래스는 보조적인 도구로 활용되지만 Tailwind 에서는 완전히 유틸리티 클래스 중심으로 설계가 되어있다는 점입니다. 따라서 단순히 Bootstrap과 비교하자면 Tailwind 쪽이 제공하는 유틸리티 클래스가 더 많고 다양합니다. 따라서 용량도 좀 큰 편이지만 build 시 안 쓰는 스타일의 경우 알아서 제공해주기 때문에 기본 라이브러리 용량은 5kb부터 시작한다고 합니다.
이것들을 자유롭게 조합하면 추가적인 CSS코드 작성 없이 단순히 html 요소의 class 속성 설정만으로 일관된 스타일링이 가능해집니다. 따라서 CSS작성 시간을 상당히 많이 줄일 수 있으며 개발자들을 클래스 작명에 대한 스트레스 및 클래스 충돌에 대한 불안감으로부터 해방시켜줍니다.
물론 Tailwind를 잘 활용하기 위해서는 Tailwind에서 제공하는 유틸리티 클래스 작명 관행에 대하여 어느정도 숙지 및 암기가 필요합니다. Tailwind는 CSS 요소 수준의 유틸리티 클래스를 제공하여 원하는 디자인을 세밀하게 구현하는데 이런 세밀한 구현에는 다양한 유틸리티 클래스에 대한 학습이 필요합니다. 그러나 Intelli Sense 라는 플러그인을 제공하여 미리보기, 자동완성, 신택스, 하이라이팅, 린팅을 지원하므로 조금만 익숙해지면 금방 문서 없이 개발이 가능합니다.
https://codepen.io/hvcxdogr-the-styleful/pen/zYbdXNb
Tailwind의 클래스를 잘 활용하면 Bootstrap과 유사한 Button 생성할 수 있습니다.
Bootstrap이나 Material과 같은 전통적인 CSS 프레임워크를 사용한 웹사이트는 아무리 사용자화를 해도 쉽게 티가 나는 경우가 많은데 반면에 Tailwind는 아예 처음부터 자유롭게 확장과 사용자화가 가능하도록 설계되어 있으며 다양한 플러그인을 제공하고 때문에 개성 있는 웹사이트를 만드는데 유리합니다.
Tailwind에서 제시하는 스타일링 방식이 CSS에서 기존 인라인 방식으로 스타일링 하는 것과 비슷하다고 생각할 수 있습니다. 하지만 CSS 인라인 스타일링시 :hover, :focus 등의 의사 클래스를 쓸 수 없으며 ::before, ::after 등의 의사요소도 쓸 수 없습니다. 그리고 미디어 쿼리를 사용할 수 없어서 반응형 디자인 구현이 어렵다는 것도 제약사항입니다. Tailwind의 경우 반형 유틸리티 변형을 사용하여 사용자 인터페이스를 구축할 수 있습니다.
이런 특징을 가진 Tailwind는 개발자들 사이의 호불호가 갈립니다. 그 이유는 무엇일까요?
가장 크게 와닿는 점은 바로 코드의 가독성 문제 입니다. 가장 큰 진입장벽이기도 합니다. 클래스명이 직관적이긴 하지만 여러 클래스를 조합하여 사용하다보면 아무래도 길어지고 반복는 코드에 가독성이 떨어지기 마련입니다. 대형 프로젝트 같은 경우 이러한 점이 유지보수성을 떨어뜨린다는 의견도 많습니다.
사용 초반의 각 스타일의 클래스명을 익히는 숙련 과정이 필요하다는 점도 Tailwind를 불호하는 개발자들이 꼽는 단점입니다. 그러나 직관적인 클래스명과 플러그인으로 보완할 수 있습니다.
Tailwind는 클래스를 분기처리하여 동적스타일링을 설정할 수 있으나 styled-components와 같이 Javascript 변수 값에 따른 구현이 번거롭습니다.
이 외에도 HTML과 CSS 코드가 혼재되는 점, CSS의 학습이 부족한 상태에서 Tailwind에 지나치게 의존하게 된다는 점도 단점이라는 의견도 있습니다.
이런 호불호가 있음에도 불구하고 빠른 시일에 간단한 웹페이지 CSS작업을 해야 할 경우 Tailwind의 사용이 굉장히 매력적이라고 생각합니다. Tailwind를 사용 할 때 CSS 혼란을 방지하기 위한 사례도 있어 참고하고 사용한다면 Bootstrap만큼 유용하게 쓰일 수 있을 것 같습니다.
**Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례**
https://velog.io/@lky5697/5-best-practices-for-preventing-chaos-in-tailwind-css
카카오 엔터테인먼트의 Tailwind 사용기
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/
하지만 역시 꾸준한 업데이트, 관리가 필요한 중대형 프로젝트의 경우에 사용하는것은 조금 많은 깊은 고민을….