참고문서: Tailwind css v4의 변경점들에 대해
개인 포트폴리오 작업을 tailwind css를 사용해서 스타일링하려고 하는데 tailwind가 4버전으로 업데이트되면서 크게 달라진 점이 있다고 해서 알아봤다. 상당히 편리해진 듯해 흥미로웠다.
가장 크게 와닿은 편리함은 tailwind.config파일이 더 이상 필요하지 않다는 거였다!
안 그래도 스터디 할 때 '테일윈드 설치했는데 config파일이 안 생겨요 이거 뭐죠????!!!' 라는 얘기를 했던 게 떠올라서 궁금했는데 이번에 제대로 이유를 알게 됐다.
기존의 3버전에서는 작업 전 tailwind.config.js파일에서 테일윈드 커스텀 변수들을 설정하고 스타일링을 시작했던 터라 이번에도 변수 설정부터 하려 했는데 나 역시 테일윈드css를 설치했는데 config파일이 생기지 않았다. 이유는 v4에서는 config파일이 없어도 더 편하게 변수를 설정할 수 있게 된 거였다(야호)
v4에서는 next.js 설치 시 자동으로 생성된 globals.css파일의 @theme {} 블록 안에 테일윈드 커스텀 변수를 지정해주기만 하면 바로 사용할 수 있다(짱이다). 하지만 편리하다고 느낀 건 오히려 이것보다는 이 @theme 블록 안에 작성한 변수가 :root에 css변수 형태로 등록된다는 점이 더 컸다. css를 혼용할 경우 css변수와 tailwind css 커스텀 클래스를 따로 설정할 필요가 없다는 게 아주 좋다고 느꼈다(짱)
결론적으로 내 경우 css를 혼용할 게 아니기 때문에 :root는 아예 비우고 @theme 블록 안에만 테일윈드로 사용할 커스텀 변수를 지정하기로 했다. 어차피 혼용한다 해도 css변수로도 사용할 수 있기 때문에!!🥳
또 하나는 rbg가 아닌 다른 색상모델을 추천한다는 점이 흥미로웠다. 보다 사람의 눈으로 보는 것과 유사하게 색상 정확도가 높고 표현범위가 넓은 OKLCH 모델을 사용한다고 하기에 이번 프로젝트에서 적용해보기로 했다.
OKLCH모델에 대해
