tailwind css v4 무엇이 달라졌나
tailwind css v4가 출시 됐다고 합니다. 현재 v3를 사용하고 있는 사용자로 궁금하기도 하고 지금 당장은 아니겠지만 이후 마이그레이션 진행하기 이전에 블로그에 작성된 관련 문서를 읽어보며 어떤 것들이 달라졌는지 내용을 정리해보고자 합니다.
새로운 고성능 엔진
완전히 처음부터 다시 작성하고 최적화 작업을 진행하여 더 빠르게 작업을 할 수 있도록 개선 했다고 합니다.
전체 빌드는 약 3.5배 빨라졌으며, 증분 빌드의 경우 약 8배 빨라졌다고 합니다.
아래는 Catayst UI toolkit의 v4 적용 전후의 빌드 시간 비교 결과는 다음과 같습니다.

가장 인상적인 부분은 증분 빌드 성능 향상인데, 이미 사용중인 클래스의 경우 빈번히 재사용되기 때문에 개선에 대해서 체감하기 쉬울것으로 보입니다.
Tailwind에서 Full Build는 어떤 과정은 어떻게 이루어질까요? 1. 코드 스캔: 프로젝트내 사용된 클래스들을 식별합니다. 2. 필터링: 스캐닝 하여 실제 사용된 tailwind 클래스만 추출합니다. - tailwind는 미리 정의된 클래스를 포함하는것이 아닌 실제 사용된 클래스만 포함합니다. 3. css 생성: tailwind 설정에 대해 css를 동적으로 생성합니다. - tailwind 기본 시스템을 기반으로 필요 css 규칙 생성 4. 최적화 (옵션): 불필요한 css들은 제거 및 압축 합니다. - 최적화를 진행하여 파일 크기를 줄이고 불필요한 스타일 제거
Incremental build(증분빌드)? 프로젝트내 전체 코드를 컴파일 하는것이 아닌 변경된 부분에 대해서만 업데이트를 진행하는 것을 말합니다. tailwind 에서 증분빌드는 다음과 같은 목적을 위해 사용됩니다. - 새로운 css가 있는 경우: 새로운 유틸리티 클래스가 필요하면 해당 클래스만 새로 생성합니다. - 새로운 css가 없는 경우: 이미 생성된 css를 재사용하며, 컴파일 과정이 거의 필요 없습니다.
최신 웹을 위한 디자인
v4에서는 다음과 같은 최신 css 기능을 제공합니다
- Native cascade layers -
@layer
를 사용하여 스타일을 그룹으로 묶고 우선순위를 명확하게 지정할 수 있습니다.
- 명시적으로 정의한 커스텀 속성 -
@property
를 사용하여 변수의 타입과 기본값을 시정 할 수 있습니다.
- color-mix() - 색상을 동적으로 혼합할 수 있게 합니다.
- Logical Properties (논리적 속성) - LTR(Left to Right), RTL(Right to Left) 언어 지원을 쉽게 해주는 css 속성
간소화된 설치과정
v4에서는 설치 과정 또한 대폭 간소화되었습니다.
postcss 설정 파일내 플러그인 추가
css에 tailwind 불러오기
- 간단한 CSS 설정 - 이제
@tailwind base, @tailwind components, @tailwind utilities
같은 지시어 없이@import ‘tailwindcss’
한 줄만 추가하여 tailwind css룰 프로젝트 내 추가 할 수 있습니다.
- 제로 설정 - 이제 tailwind에서는 알아서 파일을 찾기 때문에
tailwind.config.js
설정 파일 내에서content
설정을 할 필요가 없으며tailwind.config.js
파일 또한 추가 할 필요가 없습니다.
- 외부 플러그인 불필요 - 최신 문법 변환과 vendor-prefix를 내부적으로
Lightening CSS
통해 처리합니다.
Lightening CSS? Rust 기반으로 작성된 도구로 비슷한 JS 기반 도구들 보다 약 100배 이상 빠릅니다. 최신 css 기능과 문법을 사용 할 수 있도록 해주며 vendor-prefix 또한 자동으로 적용하요 코드를 깔끔하고 중복없는 상태로 유지 할 수 있도록 합니다.
자동 Content 감지
위에서 한 번 언급한것 처럼 v3에서 처럼 content에 배열을 넘겨 감지할 파일 경로를 지정할 필요 없이 v4에서는 자동으로 모든 파일을 감지 해줍니다.
한 가지 예로
.gitignore
내 정의된 파일들은 자동으로 감지 대상에서 제외되며 이미지, 비디오 그리고 압축파일 등의 바이너리 확장자들 또한 제외됩니다.명시적으로 포함하고자 하는 css들에 대해서 css 파일내에서
@source
를 사용합니다.CSS-first 설정
v4에서 가장 큰 변경점 중 하나는 tailwind를 js 기반 설정에서 css 기반 설정으로 변경되었다는 것 입니다.
tailwind.config.js
파일을 대신 css 파일 내에서 @theme
을 통해 필요한 정의를 직접 구성 할 수 있어 관리해야될 파일이 하나 줄어듭니다.v3에서는 다음과 같은 형식으로 작성합니다.
v4의 경우 직접 css에서 설정합니다.
CSS theme variables
모든 디자인 토큰을 기본적으로 css 변수로 노출하여 런타임에 css만으로 필요한 값을 참조할 수 있도록 합니다.
@theme
을 통해 생성된 변수들의 경우 :root
내 추가되어 프로젝트 전반에서 재사용 가능합니다.Dynamic utility values and variants
v3의 경우
arbitrary value syntax
([value]) 를 사용하거나 직접 설정 파일을 수정해야 했지만, v4에서는 유틸리티 클래스에 별도 설정 없이 특정 유형의 임의값을 수용합니다.별도의 설정 없이 커스텀 data 속성을 타켓팅하여 스타일을 적용 할 수 있습니다.
- data-current 속성이 지정되어 있을 경우 opacity-100이 적용됩니다.
P3 color palette
v4에서는 색상 표현 방식을 기존 RGB 에서 OKLCH 로 전환했습니다.
- OKLCH는 사람의 시각적 인식을 기반으로 L(밝기),C(채도),H(색상)을 정의하여 더 넓은 색 범위를 표현 할 수 있습니다.
- sRGB가 제한했던 색상에서 더 선명하고 생동감 있는 색상을 사용 할 수 있습니다.
Container 쿼리
container query를 사용하기 위해 v4에서는
@tailwindcss/container-queries
설치할 필요가 없습니다. container query? 요소의 부모 container의 크기에 따라 css 스타일을 다르게 적용 하는 기능입니다. 기존의 미디어 쿼리와 유사하지만 container는 viewport 크기가 아니라 container의 크기를 기준으로 스타일을 조정한다는 점에 차이가 있습니다.
새로운 3D transform 유틸리티
v4에서는 3D 변환을 지원하는 새로운 유틸리티를 도입하여 html 요소를 공간에서 회전, 이동, 크기 조정 등의 스타일링을 적용 할 수 있습니다.
- 회전:
rotate-x-*
,rotate-y-*
- 크기 조정:
scale-z-*
- 이동:
translate-z-*
- 원근:
perspective-
,perspective-origin-
v3의 경우 2D에 대해서만 변환이 가능했으며, 3D 변환의 경우 직접 작성해야 했습니다.
@starting-style 지원
css 기능인
@starting-style
을 지원하는 starting
를 통해 js 없이 페이지에 처음 표시되는 요소의 애니메이션을 구현 할 수 있습니다. @starting-style
은 js 없이 페이지에 첫 랜더링 되는 요소에 애니메이션을 쉽게 적용 할 수 있게 해줍니다. 해당 기능을 새로운 css 기능으로 브라우저에서 완벽하게 지원되지 않을 수 있습니다.지원되지 않는 경우를 고려하여 js를 보완적으로 사용 할 것이 권장됩니다.
not-* variant
css의
:not()
을 지원하는 not-*
이 추가되었습니다.이는 특정 조건에 부합하지 않을 때의 스타일을 적용하는데 있어 유연한 접근 방식을 제공합니다.
@support
조건을 부정하는것도 가능합니다.결론
버전 업그레이드 관련해서는
migration guide
를 읽으면서 수동으로 진행하던가 upgrade tool
script를 활용하여 자동으로 진행하면 특별한 이슈 없는 이상 쉽게 v4를 적용 할 수 있다고 생각합니다.이제 직접 content 배열을 설정 할 필요 없다는 점 등 많은 부분에 있어 설정을 단순하게 혹은 자동으로 처리되도록 한다는 점. 좋은 성능 뿐만 아니라 개발자 경험 고려한 이번 업데이트 개인적으로는 만족스럽습니다.
하지만 사용하고 있는 plugin들도 같이 사용이 가능한것인지는 모르겠습니다. 일단 조만간 마이그레이션 한 번 해보면서 확인을 봐야겠습니다.
참고: