tailwindCSS를 사용하면서 느낀점

CSS전후처리기를 비교하는 글에서 나는 tailwindCSS를 공부해보고 싶다고 했다.

그리고 현재 CRUD를 적용한 프로젝트에서 tailwindCSS를 사용해 봐야겠다는 생각이 들어서 공부하면서 적용 중이다.

tailwindCSS를 적용하는 법은 공식 홈페이지의 문서에 잘 나와있기 때문에 적용하는 법에 대해서는 작성하지 않으려고 한다.

장점

1. 이름 짓는 고민이 사라졌다. 

대부분의 CSS 전후처리기를 사용하기 위해서는 클래스명 혹은 함수명을 고민해야 한다. 

이름이 겹치지 않아야 하고, 생성한 이름이 적용하고자 하는 요소를 잘 표현해줘야 한다.

하지만 tailwindCSS의 경우 클래스에 내가 적용하고자 하는 스타일의 클래스를 작성해주기만 하면 된다.

<div className="w-10 h-10 bg-gray-500"> </div>

 

 2. 파일의 개수가 확연히 줄어든다.

styled-component 같은 것을 사용한다면 Js파일 안에 다 작성하지만 스타일의 코드 량이 많아진다면 스타일만 담당하는 Js파일을 하나 더 만들어주기 때문에 1~2개의 파일이 생성된다. 

SASS, PostCSS 같은 것을 사용한다면 Js파일 하나에 Css파일이 기본이기 때문에 총 2개의 파일이 생성된다.

하지만 tailwindCSS의 경우 클래스명으로 작동되기 때문에 추가적인 Css, Js파일들이 필요가 없기 때문에 파일들의 수가 확연히 줄어든다. 

tailwindCSS를 오래 사용해보지 못했기에 위의 장점 외에는 찾지 못하였다....

 

단점

1. 가독성은 포기

클래스명에다가 스타일을 지정하기 때문에 가독성은 포기해야 한다.

<div className='mt-3'>
	<button
    	type='submit'
        className='
        inline-block 
            px-6 py-2.5 
            bg-blue-600 
            text-white 
            font-medium 
            text-xs 
            leading-tight 
            uppercase 
            rounded 
            shadow-md 
            hover:bg-blue-700 
            hover:shadow-lg 
            focus:bg-blue-700 
            focus:shadow-lg 
            focus:outline-none 
            focus:ring-0 
            active:bg-blue-800 
            active:shadow-lg 
            transition 
            duration-150 
            ease-in-out'>
          로그인
	</button>
</div>

버튼 하나를 스타일링하기 위해 작성한 코드이다.....

 

2. 어느 정도의 클래스명을 외워야 한다.

클래스명에 정해진 스타일이 적용되기 때문에 해당하는 스타일에 맞는 클래스명을 알고 있어야 한다.

위의 클래스명을 보았을 때 클래스명만 보고도 어느 정도 예상이 가능한 클래스명도 존재하지만 그렇지 않은 것도 존재한다. 

그렇기에 공식 문서에 검색을 해가며 작성해야 했다. 

또한 수치로 값을 매겨야 하는 것들이 존재한다. 예를 들어 글자의 크기를 24px로 주고 싶다고 가정을 한다면 기존 CSS의 경우 직관적으로 값을 넣어주면 끝이지만 tailwindCSS의 경우는 그렇지 않다. 

text-xs text-sm text-base text-lg..... 뒤에 글자만 보고서는 글자의 크기를 절대 유추할 수가 없다. 

(물론 extension을 통해 정보창에 해당하는 클래스에 CSS정보가 나오기는 한다.)

 

3. 어떻게 작성해야 하는지 모르겠다.

지금까지 사용해 본 CSS의 경우 그래도 CSS의 문법을 반영하고 있는 상태지만 tailwindCSS의 경우는 기존의 CSS와 정말 다르기 때문에 내가 작성하고 싶은 것을 어떻게 작성해야 하는지를 찾아봐야 한다.

 

4. 커스텀 기능

tailwindCSS의 경우 클래스마다 스타일 값이 정해져 있기 때문에 만약에 정해져 있는 값이 아닌 내가 따로 사용하고 싶은 값이 있다면 tailwind.config.js를 통해 커스텀을 할 수 있다. 

이 말인즉슨 내가 사용하고 싶은 값이 기본값이 아니라면 일일이 값을 커스텀해줘야 한다는 말이기 때문에 이 또한 나에게 불편함으로 다가왔다. 

 

마무리

솔직히 CRUD 프로젝트를 만들면서 괜히 tailwindCSS로 했다는 생각이 든다.

(나와 같은 초보자들이 tailwindCSS를 사용한다면 공식문서 혹은 구글에서 문법을 찾는 시간이 오래 걸릴 것이다....)

그냥 다른 걸로 CSS로 넘어갈까도 수도 없이 생각했지만 일단 최대한 할 수 있는 데까지는 해볼 생각이다. 

빨리 이 프로젝트를 끝내고 다른 CSS를 사용하고 싶다. 

역시 트렌드를 쫓아가는 것은 어려운 일이다....