본문 바로가기
HTML,CSS

Tailwind CSS 장단점, 쓰면서 느낀점

by bright17 2022. 12. 9.

이번에 새로 들어가는 프로젝트에서 Tailwind css를 사용하기로 하여 공부를 시작했다.

Tailwind CSS 란?

CSS 프레임워크 중 하나로 클래스명을 사용하여 스타일을 적용하는 방식으로 사용한다.

<h1 class="text-xs font-bold">Hello world!</h1>

이런 식으로 Style 태그를 사용하지 않고 class 속성에 스타일을 지정한다.

장점

  • 별도의 css 파일을 생성하여 연결해주지 않아도 된다.
  • 스타일을 지정하는 데 사용하는 코드의 길이가 짧아진다.
  • ⭐클래스 이름을 고민할 필요가 없다. (이건 너무 큰 장점이라고 생각함)
  • 반응형 스타일을 구현하기 쉬워진다.

단점

  • class 속성에 여려 스타일을 지정하면 HTML 코드가 지저분해진다. (개인적으로 이게 너무 거슬림)
  • class 속성 속 여러 코드를 익히는데 시간이 걸린다. (css 코드를 알고 있다면 시간을 단축할 수 있다.)

 

사용하며 느낀점

많은 기업에서도 쓰일정도의 기능을 가지고 있고 웬만한 스타일은 문서를 통해 쉽게 만들 수 있어 편리했다. 다만 html 코드가 길어지는 건 아직도 익숙하지 않아서 보기 좀 안 좋지만 class명을 매번 지어줄 필요 없는 건 너무 좋았다!! 이게 정말 시간이 오래 걸렸는데

개인 프로젝트에서도 한번 사용해보면서 점점 익숙해져야 할 것 같다