tailwindcss란

오늘은 css 작성 방식 중 하나인 tailwindcss에 대해 알아보겠습니다.
 
notion image

tailwindcss란 무엇일까?

tailwindcss 공식 문서 사이트에 "HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있다." 라고 적혀있습니다.
tailwindcss는 사용자 정의를 염두에 두고 설계된 맞춤형 사용자 인터페이스를 구축하기 위한 프레임워크입니다.
 

사용법

 

장점

많고 많은 css 작성 스타일 중 tailwindcss가 가진 장점이 무엇인지 알아보자면
  1. 맞춤 css를 덜 작성한다.
      • HTML에 직접 클래스에 적용하여 요소의 스타일을 지정할 수 있습니다.
      • 유틸리티 클래스를 사용하기 때문에 css 파일을 만들어 작성하지 않고도 사용자 정의 디자인을 작성할 수 있습니다
  1. 빠른 빌드 시간 및 파일 크기
      • PurgeCSS 최적화를 사용하여 HTML을 스캔하고 사용하지 않는 클래스를 제거하여 파일 크기를 상당히 줄일 수 있습니다.
  1. 클래스 이름을 만들 필요가 없다
      • emotion이나 sass를 사용할 때 이름을 정해야했지만 tailwindcss를 사용하면 이름을 붙여줄 필요가 없이 스타일 지정이 가능하기 때문입니다.
  1. 반응형
      • tailwindcss는 기본적으로 모바일 우선 접근 방식을 사용하기 때문에 복잡한 반응형 레이아웃을 더 쉽고 자유롭게 구축할 수 있습니다.
  1. 커스터마이징
      • 플러그인을 사용해서 css 대신 js를 사용해 사용자의 스타일 시트에 삽입할 새 스타일 등록이 가능합니다.
       

단점

  1. 코드의 가독성 & 유지보수
      • 클래스 네임을 스타일로 추가하기 때문에 코드가 복잡하고 더러워 보일 수 있습니다.
      • 유지보수를 하는 과정에서 스타일을 수정해야 할 경우 이름이 없어 가독성이 떨어집니다.
  1. 러닝커브 및 적응
      • css를 베이스로 만들어졌지만 사용하는 방식에 있어선 tailwindcss의 방식을 따라야 하기 때문에 적응하기 힘들 수 있습니다.
 
이렇게 tailwindcss에 대해 알아보았습니다. 제가 사용하여 느껴보았을 때 확실히 emotion보다
스타일링이 쉽고 더 빠르게 작업할 수 있었습니다.
단점에 있는 코드의 가독성 같은 경우 tailwind-merge 를 통해 줄일 수 있었습니다.
한 번 사용해보시는 걸 추천드립니다.