Tailwind CSS v4 공개

가장 애용하는 스택 중 하나인 Tailwind CSS의 새로운 메이저 버전인 v4에 대한 베타가 나와 바로 내용들을 확인했고,
v4에 나올 피쳐들은 대부분 확정된 것 같아 내용들을 익힐 겸 글도 같이 써보려고 한다.

업그레이드 방법

npx @tailwindcss/upgrade@next

 

업그레이드 하는건 크게 어렵지 않게 위 커맨드를 통해 진행할 수 있었고,

업그레이드 후 주요 변경 사항으로는 config 파일에 대한 규칙 변경과 기존 클래스 이름 수정 등이 있었는데,
아래 링크에 있는 레포에서도 변경된 내용에 대한 커밋 내용을 기록해 두었습니다.

 

https://github.com/bysxx/next15-ts-template-fullstack/commit/d7d40c7e9dafed9a33884b7b1a360efcbe5de7f9

 

---

 

성능 개선

프레임워크에 대한 근본적인 수정이 있었다고 하는데, 빌드 속도에서 다음과 같은 결과를 낸다고 한다.

 

• 전체 빌드(Full Build): 이전 대비 3.5배 이상 빨라짐.
• 증분 빌드(Incremental Build): 변경된 부분만 컴파일할 경우 8배 이상 빨라짐.
• 새로운 CSS가 필요 없는 증분 빌드: 100배 이상 빨라지며, 빌드 시간이 1ms 이내로 완료됨.

 

Config

기존에는 tailwind.config.js 파일에서 테마 설정을 관리했었는데,
이제 v4에서는 CSS 파일 자체에서 설정을 정의할 수 있는 기능이 추가되었습니다.

기존 방식도 지원되지만, 새로운 CSS 기반 설정은 스타일과 설정을 한 곳에서 관리할 수 있어 더 효율적으로 보인다.

 

참고문서: https://tailwindcss.com/docs/v4-beta#css-configuration-in-depth

 

content 배열 제거

tailwind.config.js에서 지정해줬어야 했던 content 배열이 이제 Tailwind CSS v4에서는 파일 스캔을 자동으로 처리하므로, 더 이상 수동으로 설정하지 않아도 된다고 합니다.
(분명 content 배열에 추가를 안해놓고 왜 스타일 적용이 안되지라고 한 번쯤은 다들 헷갈린 적이 있을 것 같은데 이제 그럴 걱정은 없을 것 같다.)

 

Theme 설정 단순화

v4에서는 유틸리티 클래스의 동적확장을 지원해줘 grid-cols-12, z-40, opacity-70와 같이 미리 tailwindcss 쪽에서 지정해놓지 않은 유틸리티들을 별다른 설정 없이 사용할 수 있다고 하는데,
프로젝트를 왔다갔다 하다 보면 이게 설정했었는지 아니면 원래 있는 값인지 헷갈리고 진짜 불편했는데 고쳐줘서 너무 좋은 것 같다.

 

기타

• 기존 RGB 기반 색상 대신 OKLCH 색상 공간을 사용하여 더 넓은 색 영역 활용 가능
• 3D Transform 지원: rotate-x-*, rotate-y-* 등 3D 변환 클래스가 추가
• CSS 레이어를 사용해 스타일 우선순위를 세밀하게 제어 가능
• 기타 유틸리티 클래스 추가 및 제거