이번 프로젝트를 진행하면서 처음으로 tailwind를 사용하게 되었다. tailwind를 사용하기로 결정하면서 우선적으로 장단점에 대해서 찾아보았다.
장점은 한마디로 ‘쉽고 빠르다’였다. 그저 잘 만들어진 클래스를 가져다가 나열하면 되는 것이었다. 처음 사용해본 나도 고작 몇시간만에 해당 문법에 적응하고 자연스럽게 사용할 수 있게 되었다. 개발 초기, 간단한 디자인만 구현하던 때에는, 이 tailwind라는 것이 너무 편해서 다른 스타일 기법 중 최고라는 생각을 하기도 했다.
하지만 개발을 진행할수록 많은 문제점을 발견하게 되었다.
첫번째 문제점은 코드가 너무 복잡해진다는 것이다. 예를 들어,
class='mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4 border border-gray-500'
이러한 길고 복잡한 코드가 나올 수 있다. tailwind를 사용해 본 사람이라면 크게 어렵지 않게 코드를 이해할 수 있겠지만, 처음 본 사람의 경우 길이에 지레 겁을 먹을지도 모른다. 더군다나, 모든 요소에 이렇게 긴 스타일 코드가 들어가있다면, 개발자 입장에서도 유지보수가 어려워지고 이해하기 어려워질 것이다. 이렇게 tailwind의 코드가 복잡해지는 시점에서 다른 스타일 기법 사용을 고려해보게 될 것 같다.
두번째 문제점은, 동적 스타일이 적용되지 않는다는 것이다. 이 부분 때문에 tailwind를 사용하고 싶지 않다는 생각도 했다. 예를 들어,
class={`rotate-[${index * (360 / 22)}deg]`}
이러한 방식으로 각도에 따라 회전 효과를 주고 싶을 때가 있다. 그러나 tailwind의 경우 동적으로 생성된 class는 인식이 되지 않기 때문에 ‘rotate-[0deg]’ 와 같이 완성된 문자열 형태로 넣어 주어야 한다. 각도의 종류가 적을 때는 별로 문제가 되지 않지만, 0도부터 360도까지 모든 각도에 대한 스타일이 필요하다면 곤란해진다. 정말 치명적인 문제점이라고 생각하기 때문에, tailwind 측에서 최대한 빠르게 동적 스타일도 지원해주었으면 하는 바람이다.