저는 기본적인 CSS나 Styled-components를 사용하는데 적응되어있는 사람입니다. 그러나, 모종의 이유로 TailwindCSS를 써봐야했고 이 글은 그에 대한 후기입니다.
TailwindCSS 프론트 스터디할 때 스터디원 중 1명이 하는걸 봤었습니다. 물어보니 미리 정의된 클래스 컴포넌트를 사용하는 것이라고하며 매우 직관적이라고 했어요. 실제로 보니까 진짜 직관적이긴 하더라구요.
TailwindCSS 장단점
장점은 직관적이고 파일이 하나에서 관리된다는 점이며
단점으로는 HTML파일이 조금 가독성이 떨어진다는 점이었습니다.
사용 예제는 아래 이미지와 같아요.
이미지처럼 클래스 안에다가 미리 정의되어있는 클래스들을 입력하는게 전부입니다.
TailwindCSS 써보고 느낀 점
첫 번째는 외워야합니다.
물론 CSS에 관한 지식을 가지고있다면 클래스 정의도 그에 맞춰서 직관적으로 해놨기에 금방외웁니다. 하지만, 많은 양의 CSS CLASS를 또 외워야한다는 부분에서 초반에는 공식문서를 좀 많이 봐야합니다.두 번째는 단위문제입니다.
저는 여기서 "아 쓰기 힘들다"라고 느꼈습니다. 그 이유는 TailwindCSS에서 제공하는 단위는 rem단위로 보통 디자이너가 작업하는 피그마에서는 px을 제공합니다.저는 항상 제가 디자인을 했기때문에 px에 많이 익숙한 편인데 단위가 rem으로 나와버리니 어떻게 해야 할 지에 대해서 애먹었습니다.
그래서 그냥 제가 디자인하면서 기본적으로 잡았던 시스템들을 재정의해서 사용했습니다.
문제는, 이게 괜찮으면 좋은데 이렇게 쓰는게 아닐까봐 이를 검증할 방법이 없었습니다. 실무에서 어떤 단위를 쓰는지..
그래서?
글을 작성하면서 느낀 것이지만, 반응형을 생각해 봤을 때 rem단위를 쓰는게 맞는 것 같더라구요.
단위에 대해서 조금 더 깊게 공부를 해봐야할 것 같네요. 우선 디자인 시안도 rem 변환이 편하도록 고려해서 해야겠습니다.
해상도 이슈로 인해 px단위를 2 혹은 4배수로 하라고 배웠었는데 단위 변환 문제에서도 2의 배수가 아니면 조금 복잡해질 것 같다는 생각이네요.
rem은 우리가 왜 2의 배수로 단위를 작성해야하는지에 대한 근거를 보충해주는 것 같습니다.
가장 큰 느낀점은 사용하려면 편하기야 하겠지만 굳이..? 싶은 느낌이 아직 듭니다. 더 공부해보고 사용하면서 이유를 찾아봐야겠네요 :)
