[TIL] Tailwind CSS

요새 어떻게 기존 코드의 class 명을 유지하고 지을까.. css는 어떻게 작성해야할까.. 디자이너와의 협업시 디자인시스템이라는게 있는데 무엇일까.. 핸드오프로 같이 할때 최적은 무엇일까 등등 고민하다 css관련 class명에 대한 보물을 찾아서 이거다! 싶은게 있어서 간단하게 왜 선택하였는지 어떤 특징이 있는지 간단하게 이야기 하려고 한다. 그 이름은 바로 Tailwind CSS !!

사용 목적, 결정한 이유

기존 프로젝트의 css 사용 방식이 순수 css로써 클래스명을 정의하고 사용 하였다. 다른 사람이 만들었기 때문에 유지보수도 힘들다고 판단하였고 해당 클래스명 명명 방법론도 BEM, SMACSS, OOCSS 등 충분한 이해가 필요하여야 추가적인 작업이 가능하기 때문에 런닝커브(?)와 CSS이해하고 내가 바로 실무에서 적용하려 구조를 이어가기 힘들다고 판단하였다

그러면서 찾아보게 되었고 Tailwind CSS경우 이러한 클래스명 고민을 하지않아도 되고 유틸리티 클래스명을 사용할수 있다고 하여 채택하게 되었다. 또한 Tailwind CSS가 엄청난 인기를 하고 있기도 하다(아마 같은 이유로 많은 곳에서 사용 하는 듯 하다). 아래 그래프를 보듯이 꾸준히 사용이 증가하고 있다. 

Tailwind CSS npm weekly Download

Feat. 추가적으로 Tailwind CSS의 단점도 있는데 그건 당연히 유틸리티 클래스명이라고 하더래도 코드가 길어질어지면 이거 또한 가독성 저하를 일으키기 때문에 가능하다면 Styled-Component를 적용하여 장점을 살려 사용할 계획이다

Tailwind CSS 정의 및 설명

Utility-First  지향하는 CSS 프레임워크이다.
Utility-First란 Tailwind CSS 메인컨셉으로써 클래스명을 별도로 정의하지않고 제공하는 유틸리티 클래스를 사용 하는 특징이다.

 

기본형태는 이렇다. class명을 보면 py-2, px-4, rounded-lg 등등 이 있는데 그냥 이름이 아닌 css 특성을 가진 클래스 명인것이다. 이는 아래를 보면 이해하기 더 쉽다.

이렇게 Class 입력시 어떤 색인지 해당 색을 볼수 있다. 따라서 그전 button을 보면 class명에 bg-blue-500 이 있으니 파란계열의 배경색이 되었고 text-white 이 있기 때문에 안에 text내용이 하얀색으로 된것이다.

 

하지만 단점으론 결국 class 명이 엄청 길어 진다는 것! 따라서 styled-components 를 적용 하면 서로 시너지가 좋다고 생각한다!! 어서 배우고 실험해본다음에 본 프로젝트에 적용해야겠다!!

 

나중에 이와관련하여 TIL 이 아닌 해당 라이브러리 사용방법이나 적용한 글을 올릴 생각이다!