Tailwind CSS

tailwind를 사용하기 전, 공부 용도로 tailwind에 대해 정리하게 되었다.

Tailwind CSS란?

tailwind는 부트스트랩과 비슷하게 m1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML코드 내에서 스타일링을 할 수 있다.

<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>

Tailwind CSS의 장점

빠른 개발 가능

스타일 코드가 HTML코드 안에 있기 때문에 css파일을 별도로 관리할 필요가 없다. 또 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 css 코드를 찾을 수고도 사라진다.

또 나같이 태그의 클래스명을 고민하는 사람들은 tailwind를 사용하면 클래스명을 사용할 일이 거의 없으므로 css의 클래스명을 고민하지 않아도 된다.

쉽고 자유로운 커스텀

tailwind css는 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀이 가능하다. 커스텀을 할 때 기본 스타일 값을 수정하는 방식이기에 디자인 일관성도 해치지 않는다. 덕분에 디자인 시스템이나 다크 모드 구현도 간편하다.

로우 레벨의 스타일 제공

각 css 요소 수준의 유틸리티 클래스를 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있다.

Intelli Sense

로우 레벨의 스타일을 제공한다는 것은 거의 모든 스타일의 유틸리티 클래스를 학습해야 한다는 의미와 같다. 이러한 불편을 해소하기 위해 Intelli Sense 플러그인을 제공한다. 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 익숙해지면 문서 없이 개발할 수 있다.

Tailwind CSS의 단점

코드가 못생김

말 그대로이다.

초반 클래스명 러닝 커브

초반에는 각 스타일의 클래스명을 익히느라 개발하는 내내 문서를 참고해야 하는 번거로움이 있다. 그래도 대부분의 클래스명이 기존 CSS 속성이나 속성값과 비슷한 경우가 많고 자동완성을 지원하는 Intelli Sense 플러그인이 있어서 금방 익숙해진다고는 한다.



작성하는데 참고한 블로그 : https://wonny.space/writing/dev/hello-tailwind-css