우당탕탕 Tailwind 적용기

Tailwind란?

 미리 정의된 유틸리티 클래스들을 이용해 스타일링하는 CSS 프레임워크로, 부트스트랩처럼 flex, block과 같은 클래스명을 입력하면 그에 맞는 스타일이 입혀지는 형식으로 동작한다.

 장단점은.. 이미 너무나 많은 블로그에 나와 있기 때문에 거두절미하고 내가 좋았던 부분과 아쉬웠던 부분을 소개한다.

이건 좋았다

• 네이밍에 시간을 쏟지 않아도 됨

  더이상 클래스명 짓기에 골머리를 썩히지 않아도 된다는 사실이 굉장히 좋았다. 한 번쯤은 다들 네이밍에 머리 아팠던 경험이 있을 거라 생각한다.

이건 아쉬웠다

• 클래스명 덮어쓰기

  예를 들어, 클래스명으로 text-13 text-15를 작성했다고 하면 뒤에오는 text-15가 적용될 것 같으나 실제로는 그렇지 않았다.

• 동적 스타일링이 불가능

  변수에 따른 스타일링이 불가능해 한동안 styled-components가 그리웠다(사실 지금도 조금). 불가피하게 inline-css를 사용해야 하는 경우가 발생한다.

• 사용하는 클래스명을 익히는 데 시간이 듦

  사용한지 이제 4개월 차에 접어듦에도 아직도 모르는 것들이 많아 공식문서를 끼고 산다.

참고사항

1. 위와 같은 아쉬운 점들을 보완하기 위해 clsx, tailwind-merge와 같은 패키지와 함께 사용한다. 특히 tailwind-merge는 클래스명 덮어쓰기를 지원한다!

2. vscode의 Tailwind CSS intelliSense extension을 다운받으면 클래스명을 자동완성 할 수 있다. 무려 tailwind.config.js에 정의한 테마까지도!

3. 처음에는 className을 자동으로 정렬해주는 prettier가 있어 사용했으나, eslint와 충돌이 발생하고 따로 해결방안이 없어 제거했다.

4. w-[100px]를 w-100으로 사용하기 위해 다음과 같은 코드를 세팅했다.

   // tailwind.config.js
   
   // 0부터 100까지 괄호 제거 후 사용할 수 있는 코드
   const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
   
   module.exports = {
     // 생략
     theme: {
       extend: {
         width: px0_100,
       },
     },
   };