[CSS] Tailwind CSS | 장점, 단점

YounGyeom·2021년 6월 13일
1

CSS

목록 보기
1/1
post-thumbnail

StudyPot 그룹 프로젝트의 스타일링을 위해 CSS-in-JS 라이브러리 중 emotion과 antD 를 적절히 섞어서 사용 중이다. figma로 와이어 프레이밍을 먼저 해두고 프로젝트를 시작하기 했지만 CSS 스타일의 세세한 모든 것을 정해놓지 않은 상태에서 작업을 시작해버려서 코드를보면 전체적인 스타일링의 일관성이 떨어지고 그에 따른 많은 수정이 필요하게 되었다. 또 서로 간의 컴포넌트 이름을 짓는 방식도 조금씩 달라서 혼란스러웠다. 작은 스타일을 변경하는 것에도 컴포넌트를 만들어야 해서 불편한 마음이 컸다. 이런 와중에 우연히 깃허브에서 tailwind를 알게 되었고 나중에 토이 프로젝트나 다른 프로젝트를 진행할 때 쓰면 아주 좋을 것 같아서 (특히 협업할 때) 내가 직접 느낀 장점과 단점을 기록해둔다.

Tailwind CSS란?


사용방법이나 컨셉(Utility-First)은 부트스트랩의 그것과 비슷하다. 예를들어 py-1 같이 tailwind에서 지정한 class 이름은 각각의 고유한 CSS 기본속성을 가지고 있어서 아래와 같이 class에 넣기만하면 된다.

tailwind 장점

  1. 각 스타일마다 지정된 클래스명이 있어서 그것을 가져다가 넣기만 하면 되기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없다.
  2. 클래스명을 가져다가 넣는것만으로도 적절히 구성된 색상이나 margin∙padding 간격, 사이즈 등을 빠르게 반영할 수 있다.
  3. 미리 지정된 클래스명을 가져다가 사용하기 때문에 프로젝트를 일관된 스타일로 구현하기가 수월하다.
  4. 각 CSS 요소 수준의 유틸리티 클래스를 제공하기 때문에 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀이 가능하다.
  5. JavaScript 코드에 의존하지 않고 완전히 분리되어 있다.
  6. emotion이나 styled-components 와 같은 CSS-in-JS 라이브러리와 함께 사용할 수 있다.
  7. Tailwind components 에서 사용자들이 Tailwind 기반으로 제작한 다양한 컴포넌트들을 공유한다. 살펴보고 참고하기 좋다. 물론 회원가입만하면 본인이 만든 컴포넌트를 전세계 사용자들과 공유할수도 있다.

tailwind 단점

  1. className이 tailwind 만의 방식으로 정해져있어서 공식웹사이트에서 해당 className이 어떤 CSS Properties를 뜻하는지 찾아봐야하는 수고스러움은 존재한다. 물론 css 속성에 대한 기본 이해도가 있다면 오래걸리지는 않을 것이다.
  2. class에 클래스네임을 전부 가져다 넣기 때문에 코드가 길어져서 가독성이 떨어질 수도 있다.

Reference

profile
keep it fresh!

0개의 댓글