tailwindcss v2 -> v4 마이그레이션 후기입니다.

제가 운영하는 사이트는 아주예전에 판매되던 slow 스킨을 이용하고 있습니다.

워낙 용량적으로, 그리고 DOM적으로도, 그리고 SEO적으로도 비효율적이라 고통받고있긴 한데, 제 기준에는 아직 이만한 스킨이 없는것같아서 이 스킨을 통해 마개조를 계속 진행중에 있습니다.

이 스킨이 tailwindcss v2를 사용하였는데,

1. tailwindcss v2때 최적화 안하고 때려박음

2. important를 이용한, 그리고 스타일링이 고정된곳들에 class 형태의 tailwindcss 이용

위에 내용들은 지금와서 보면 결과론적인거라, 아마 그당시 개발하셨을때 최선이였지 않았을까 생각합니다.

결론적으로 마이그레이션 하고 원본 680kb, rhymix압축 + gzip시 80kb가량의 리소스를

원본 14kb, rhymix압축 + gzip시 3kb로 줄였습니다.

웹폰트를 로드해서 상당히 무거운 웹페이지라 70kb 줄이는것도 꽤 체감이 되리라 생각합니다.

1. tailwindcli를 통해 rhymix같은 번들러를 사용하지않는 대규모 프로젝트에서도 쓰기 좋아졌습니다.

나름 중규모급 프로젝트라고 자신하고있는데, 모두 스캐닝해서 css파일로 반영하기까지 WSL2 기준으로 1초걸리네요.

상당히 빠르게 컴파일되고, vite 혹은 webpack과 같은 요소가 필요없는 번들러를 사용하지 않는 환경에서도 작동되어서 매우 만족스럽습니다.

2. 은근히 하위호환성 문제가 발생합니다.

max-sm과 같은 media query에서 max size에 대한 클래스명 변경과 같은걸 제쳐두고도 하위호환성 문제가 발생합니다.

아무래도 초기화(tailwind에서 불러오던 normalizecss) 관련 문제로 보이는데, a태그 안에 img의 크기가 지정이 안되거나, line-height계산이 다르거나 하는 문제가 발생하네요.

제 작업과 별개로 v3 -> v4에서 그림자 옵션 변경과 같은 크리티컬한 문제도 있으니 ㅡㅡ;; tailwind는 메이저 업그레이드 판올림하기 쉽지 않다는걸 이번에 느꼈습니다.

꼭 저와 같이 v2 -> v4처럼 마이그레이션 하였을때는 스타일링 깨지는게 있는지 직접 눈으로 확인해보시고 마이그레이션을 진행하시기 바랍니다.

3. 문서가 은근히 불편합니다.

기존에 사용하던 tailwind.config.js가 사용되는게 맞는지 이와 관련한 문서가 정말 꽁꽁 숨겨져있습니다.

웬만하면 css파일로 처리하라는 뜻이겠지만, 정작 css파일에서 설정이 제대로 안되네요.

결론적으로, v3에서의 옵션 대다수가 적용 가능하고, 관련 예제는 아래에 첨부해두었습니다.

4. css도 이제 고도화 되는 느낌이 듭니다.

그래봤자 "Cascading Style Sheet 아니냐!" 라고 하시겠지만, 각종 directive가 적극적으로 도입되고 있는 현 상황을 보면 이야기가 달라집니다.

@layer, @container, 그리고 그에 맞춘 컨테이너 쿼리라던가, P3 지원하는 oklch 컬러코드라던가..

CSS의 러닝커브가 꽤 올라가며 거의 배워온 모든게 리셋되는 느낌입니다.

나중에 한번 CSS만 진득하게 파야될것같은 느낌입니다.

아래는 마이그레이션한 예제 소스코드입니다.

참고로 동일한 slow로 작업을 하실 예정이라면, tw-와 같은 prefix는 tw: 로 변환하셔야 합니다.

https://gist.github.com/mAKEkr/193c8916b698fa6f099336bc04b1c496

관련해서 부딪히시는분이 계신다면, 이 글로 도움이 되길 바랍니다.