css라이브러리 tailwind css의 장점

tailwind의 사용 방식

tailwind는 클래스에 "w-full h-full inline-flex items-center justify-center h-11 rounded-md px-8 ..." 이런 식으로 축약어들을 때려넣어 스타일링 해주는 방식으로 사용된다.

축약어들이 낮선게 많아 러닝커브가 상당히 있는 편인거 같다.

tailwind의 장점 (headless ui)

1. css in js에 비해 성능이 좋다.
css in js는 애초에 성능보다 개발자 경험을 중시한 라이브러리이다.
csr 방식에 최적화되어 있으며 브라우저가 js를 다 로딩하기 전까지는 내용물을 보여주기 힘들다.
css in js는 js파일을 많이 로딩해야되기 때문에 브라우저 메모리를 많이 잡아먹는다.
그러나 tailwind는 순수 css 라이브러리이며 빠르게 동작한다.

2. next.js랑 궁합이 좋다.
scc in js는 초기 로딩 시 post-render하기가 어렵기 때문에 next.js와의 궁합이 좋지 않다.
css in js는 서버에서 pre-render된 컨텐츠가 css가 안 입혀져 살짝 보였다가 마는 타이밍이 존재해서 이를 핸들링해줘야한다.
만약 css in js를 next.js랑 같이 쓰려면, 서버에서 렌더된 컨텐츠가 브라우저에서 js로딩을 하는게 아니라
서버에서 js까지 로딩을 시킨 다음에 브라우저로 보내주도록 조정을 추가적으로 해줘야한다.
그러나 tailwind같은 순수 css 라이브러리는 그런 조정이 필요없다.

3. css in css에 비해선 작명 걱정이 없다.
scss, sass같은걸 쓰면 생각외로 겹치지 않는 작명을 하기위해 길고 긴 BEM 클래스명을 짓게 된다.
긴 className을 좋아하지 않는 나로썬 되도록 짧게 지을려고 고민하는게 매우 고충인데,
tailwind는 Preset 들을 그저 무지성으로 때려박으면 된다.

4. 커스텀하기 좋다.
가장 대표적인 장점으로 뽑힌다.
mui, ant-design, ... 등 컴포넌트 라이브러리는 스타일 overwrite가 꽤 힘들다고 한다.
그런데 tailwind는 저수준 css를 조작할 수 있기 때문에 overwrite하기 쉽다고 한다.
최근 인기가 늘고있는 shadcn/ui은 tailwind 기반 라이브러리이다.
아주 쌈뽕한(?) 컴포넌트들을 제공하는데 심지어 입맛대로 tailwind 문법으로 조정하기가 쉽다.

tailwind의 단점

1. 알아보기 힘든 축약어 때문에 러닝커브가 꽤 느껴진다.
   "h-9 px-4 py-2"... 이게 뭔지 첫 눈에 알 수 있나? 나는 잘 못 했다.
   chatGPT에게 기존 css문법으로 해석해달라고 계속 물어보고 있다.
   조금 익숙해지는데에 시간이 걸릴거 같다.

2. 비교적 최신 라이브러리라 gpt가 틀린 답을 주기 쉽다.
   기본 테마 설정하는데 4시간이나 썼다. gpt가 준 답이 틀린 답인데 의심하지 않았기 때문에 핸들링이 오래 걸렸던 것이다..
   2022년 1월까지의 데이터를 알고있는 gpt가 얘를 잘 모르는거 같다.