Tailwind CSS v4.3: Scrollbar, 새 색상 등 — 2026년 19주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 19-2026
article
Tailwind CSS v4.3: Scrollbar, 새 색상 등
TAG: 프레임워크
Tailwind CSS v4.2와 v4.3이 하나의 블로그 포스트로 함께 공개되었으며, 두 릴리스 분량의 신규 기능을 다룹니다. v4.2에서는 mauve, olive, mist, taupe 네 가지 중립 색상 팔레트, PostCSS 방식 대비 빌드 속도를 2배 이상 단축하는 전용 webpack 플러그인, pbs-*, mbs-*, inline-size, block-size, inset-s-*, inset-e-* 등 확장된 논리 속성 유틸리티, font-feature-settings를 제어하는 font-features-* 유틸리티가 추가되었습니다. v4.3에서는 scrollbar-width(scrollbar-auto, scrollbar-thin, scrollbar-none), scrollbar-color(scrollbar-thumb-*, scrollbar-track-*), scrollbar-gutter를 포괄하는 스크롤바 유틸리티, cqb/cqh 단위를 위한 @container-size 유틸리티, CSS zoom 속성용 zoom-* 유틸리티, tab-size용 tab-* 유틸리티, CSS 내 스택 및 복합 @variant 지원, @utility의 --default()를 통한 기본값 지정 기능이 도입되었습니다.
Ahmad Shadeed는 min-width/max-width 미디어 쿼리를 Media Queries Level 4 범위 구문으로 전환해야 하는 실질적인 이유를 제시합니다. 기존 방식은 max-width: 300px와 min-width: 300px가 같은 브레이크포인트를 동시에 충족해 요소가 함께 사라지는 미묘한 버그를 유발합니다. 범위 구문은 이 모호함을 width <= 300px, width > 300px처럼 가독성 높은 비교 연산자로 대체하여 1px 오프셋을 수동으로 조정할 필요를 없앱니다. 양쪽 경계가 있는 범위는 (300px <= width <= 500px) 하나의 표현식으로 두 개의 and 체인 쿼리를 대체합니다. 동일한 구문은 @media를 @container로 바꾸어 컨테이너 쿼리에도 적용됩니다. 브라우저 지원은 2023년 3월부터 Baseline 안정 상태로, 현재 프로덕션에 적용할 수 있습니다.
CSS는 2023년부터 sin(), cos(), atan2()를 지원하며(Baseline, Chrome 111+, Firefox 108+, Safari 15.4+), JavaScript 없이 원형, 호, 나선, 포인터 레이아웃을 구현할 수 있습니다. 핵심 패턴은 요소별 --angle 커스텀 속성을 cos()와 sin()에 전달해 컨테이너 중심으로부터의 translate 오프셋을 계산합니다. 회전 애니메이션에서는 컨테이너가 앞으로 회전하는 동안 각 자식 요소가 animation-delay와 reverse 키워드로 역회전하여 시각적으로 바른 자세를 유지합니다. --angle을 직접 트랜지션하려면 syntax: angle을 지정한 @property 등록이 필요하며, 타입이 없으면 브라우저가 보간을 조용히 무시합니다. 위치를 결정하는 --i 인덱스 변수는 calc(var(--i) * 80ms)로 입장 애니메이션의 stagger 지연과 hsl()을 통한 색상 설정에도 동일하게 활용됩니다. 호 내비게이션에서는 시작/끝 각도 쌍이 전체 원을 대체하고, atan2(-y, -x)로 요소가 안쪽을 향하게 하며, 단일 mousemove 리스너가 --mx/--my를 전달하면 CSS가 열두 개의 회전 각도를 클라이언트 측에서 계산합니다.
이 글은 CSS 커스텀 프로퍼티 해킹인 Space Toggle 기법을 N 상태 선택기로 업그레이드한 Cyclic Space Toggles를 소개합니다. 표준 Space Toggle은 스페이스 문자로 설정된 커스텀 프로퍼티가 truthy(var() 폴백 차단)이고 initial이 falsey(IACVT — Invalid At Computed Value Time)인 특성을 이용해 조건부 속성 적용을 구현합니다. Cyclic Space Toggles는 여러 inverted toggle을 연결하여 --select 변수에 --option-* 참조의 조합을 설정하면 해당 옵션만 initial로 전환하고 나머지는 space 상태를 유지합니다. 그 결과 boolean 전용 단축 API가 탄생합니다. CSS 라이브러리 사용자는 단일 선언으로 여러 기능 플래그를 활성화할 수 있습니다(--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg)). 저자는 자신의 breakpoint-system 라이브러리에서의 실제 사용 사례를 시연하고, Tailwind 클래스 목록을 cyclic toggle 기반 CSS API로 대체하는 아이디어를 제안합니다. 전 세계 브라우저 지원율은 약 95~97%로 언급됩니다.
현대 스마트폰의 노치, 다이나믹 아일랜드, 카메라 펀치홀, 홈 인디케이터 제스처 영역은 고정된 UI 요소를 가릴 수 있습니다. 브라우저는 이 수치를 env() CSS 함수를 통해 safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left로 제공하며, 모두 Baseline 광범위 지원 상태입니다. 완전한 엣지-투-엣지 렌더링을 위해서는 먼저 meta viewport 태그에 viewport-fit=cover를 추가한 뒤 env() 값을 padding이나 positioning에 적용해야 합니다. 기본 여백이 없으므로 calc(env(safe-area-inset-bottom) + 1rem) 형태로 여유 공간을 추가합니다. 또한 브라우저 크롬이 축소되어도 안정적인 예약 영역을 유지하는 Chromium 전용 신기능 safe-area-max-inset-*도 다루지만, 아직 Safari와 Firefox에서는 지원되지 않습니다. Chrome DevTools 반응형 뷰는 항상 0을 반환하므로, 기기별 올바른 inset 값을 에뮬레이션하는 Polypane 활용을 권장합니다.
Remy Sharp는 모달처럼 보이는 오버레이를 구현할 때 dialog 요소 대신 HTML popover 속성과 ::backdrop을 함께 사용하는 데서 발생하는 보안 관련 UX 버그를 문서화합니다. popover는 포커스나 포인터 이벤트를 가두지 않기 때문에, ::backdrop을 클릭하면 오버레이가 사라지는 것처럼 보이지만 실제로는 DOM에서 그 아래에 있는 요소로 클릭이 통과합니다. Sharp는 클릭재킹 방식의 데모로 이를 증명합니다. popover 뒤에 전체 화면 숨겨진 버튼을 배치하면, 사용자가 dismiss를 위해 클릭할 때 해당 버튼이 실행됩니다. 올바른 해결책은 ::backdrop이 클릭을 완전히 차단하는 dialog 요소를 사용하는 것입니다. Sharp는 팝오버가 강제할 수 없는 모달 의도를 불투명하거나 흐린 backdrop이 암시한다는 점에서 popover가 ::backdrop을 지원해야 하는지 자체를 문제 삼으며, Firefox의 solid backdrop 배경 버그도 제보되었음을 언급합니다.
Kevin Powell은 자체 10분 타이머 아래 CSS Battle 챌린지 251, 252, 253을 풀어가며 실시간 의사결정 과정을 설명합니다. 챌린지 251은 상단 두 모서리에 border-radius: 100vw를 적용한 스택 div와 장식 줄무늬용 pseudo-element를 사용하고 margin-inline: auto로 중앙 정렬하여 약 5분 40초에 100% 달성합니다. 챌린지 252는 단일 div에 box-shadow spread 레이어(0 0 0 20px, 0 0 0 50px, 0 0 0 70px)와 절반 높이 ::after로 동심원을 구성해 99.9%를 기록합니다. 챌린지 253은 양쪽 transparent border(border-top-color와 border-bottom-color만 설정)와 rotate: -45deg로 다이아몬드 모양을 만들고, body와 html의 positioned pseudo-element 네 개로 끝단 원형 캡을 구현해 7분 58초에 100% 달성합니다. border-box 사이징의 미묘한 차이, box-shadow 단축 속성의 trailing comma 금지 규칙, 수동 left 오프셋 대신 inset과 margin-inline auto가 더 깔끔했을 것이라는 회고도 다룹니다.
Tailwind CSS v4.2와 v4.3이 하나의 블로그 포스트로 함께 공개되었으며, 두 릴리스 분량의 신규 기능을 다룹니다. v4.2에서는 mauve, olive, mist, taupe 네 가지 중립 색상 팔레트, PostCSS 방식 대비 빌드 속도를 2배 이상 단축하는 전용 webpack 플러그인, pbs-*, mbs-*, inline-size, block-size, inset-s-*, inset-e-* 등 확장된 논리 속성 유틸리티, font-feature-settings를 제어하는 font-features-* 유틸리티가 추가되었습니다. v4.3에서는 scrollbar-width(scrollbar-auto, scrollbar-thin, scrollbar-none), scrollbar-color(scrollbar-thumb-*, scrollbar-track-*), scrollbar-gutter를 포괄하는 스크롤바 유틸리티, cqb/cqh 단위를 위한 @container-size 유틸리티, CSS zoom 속성용 zoom-* 유틸리티, tab-size용 tab-* 유틸리티, CSS 내 스택 및 복합 @variant 지원, @utility의 --default()를 통한 기본값 지정 기능이 도입되었습니다.
Kevin Powell은 자체 10분 타이머 아래 CSS Battle 챌린지 251, 252, 253을 풀어가며 실시간 의사결정 과정을 설명합니다. 챌린지 251은 상단 두 모서리에 border-radius: 100vw를 적용한 스택 div와 장식 줄무늬용 pseudo-element를 사용하고 margin-inline: auto로 중앙 정렬하여 약 5분 40초에 100% 달성합니다. 챌린지 252는 단일 div에 box-shadow spread 레이어(0 0 0 20px, 0 0 0 50px, 0 0 0 70px)와 절반 높이 ::after로 동심원을 구성해 99.9%를 기록합니다. 챌린지 253은 양쪽 transparent border(border-top-color와 border-bottom-color만 설정)와 rotate: -45deg로 다이아몬드 모양을 만들고, body와 html의 positioned pseudo-element 네 개로 끝단 원형 캡을 구현해 7분 58초에 100% 달성합니다. border-box 사이징의 미묘한 차이, box-shadow 단축 속성의 trailing comma 금지 규칙, 수동 left 오프셋 대신 inset과 margin-inline auto가 더 깔끔했을 것이라는 회고도 다룹니다.
Ahmad Shadeed는 min-width/max-width 미디어 쿼리를 Media Queries Level 4 범위 구문으로 전환해야 하는 실질적인 이유를 제시합니다. 기존 방식은 max-width: 300px와 min-width: 300px가 같은 브레이크포인트를 동시에 충족해 요소가 함께 사라지는 미묘한 버그를 유발합니다. 범위 구문은 이 모호함을 width <= 300px, width > 300px처럼 가독성 높은 비교 연산자로 대체하여 1px 오프셋을 수동으로 조정할 필요를 없앱니다. 양쪽 경계가 있는 범위는 (300px <= width <= 500px) 하나의 표현식으로 두 개의 and 체인 쿼리를 대체합니다. 동일한 구문은 @media를 @container로 바꾸어 컨테이너 쿼리에도 적용됩니다. 브라우저 지원은 2023년 3월부터 Baseline 안정 상태로, 현재 프로덕션에 적용할 수 있습니다.
CSS는 2023년부터 sin(), cos(), atan2()를 지원하며(Baseline, Chrome 111+, Firefox 108+, Safari 15.4+), JavaScript 없이 원형, 호, 나선, 포인터 레이아웃을 구현할 수 있습니다. 핵심 패턴은 요소별 --angle 커스텀 속성을 cos()와 sin()에 전달해 컨테이너 중심으로부터의 translate 오프셋을 계산합니다. 회전 애니메이션에서는 컨테이너가 앞으로 회전하는 동안 각 자식 요소가 animation-delay와 reverse 키워드로 역회전하여 시각적으로 바른 자세를 유지합니다. --angle을 직접 트랜지션하려면 syntax: angle을 지정한 @property 등록이 필요하며, 타입이 없으면 브라우저가 보간을 조용히 무시합니다. 위치를 결정하는 --i 인덱스 변수는 calc(var(--i) * 80ms)로 입장 애니메이션의 stagger 지연과 hsl()을 통한 색상 설정에도 동일하게 활용됩니다. 호 내비게이션에서는 시작/끝 각도 쌍이 전체 원을 대체하고, atan2(-y, -x)로 요소가 안쪽을 향하게 하며, 단일 mousemove 리스너가 --mx/--my를 전달하면 CSS가 열두 개의 회전 각도를 클라이언트 측에서 계산합니다.
이 글은 CSS 커스텀 프로퍼티 해킹인 Space Toggle 기법을 N 상태 선택기로 업그레이드한 Cyclic Space Toggles를 소개합니다. 표준 Space Toggle은 스페이스 문자로 설정된 커스텀 프로퍼티가 truthy(var() 폴백 차단)이고 initial이 falsey(IACVT — Invalid At Computed Value Time)인 특성을 이용해 조건부 속성 적용을 구현합니다. Cyclic Space Toggles는 여러 inverted toggle을 연결하여 --select 변수에 --option-* 참조의 조합을 설정하면 해당 옵션만 initial로 전환하고 나머지는 space 상태를 유지합니다. 그 결과 boolean 전용 단축 API가 탄생합니다. CSS 라이브러리 사용자는 단일 선언으로 여러 기능 플래그를 활성화할 수 있습니다(--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg)). 저자는 자신의 breakpoint-system 라이브러리에서의 실제 사용 사례를 시연하고, Tailwind 클래스 목록을 cyclic toggle 기반 CSS API로 대체하는 아이디어를 제안합니다. 전 세계 브라우저 지원율은 약 95~97%로 언급됩니다.
현대 스마트폰의 노치, 다이나믹 아일랜드, 카메라 펀치홀, 홈 인디케이터 제스처 영역은 고정된 UI 요소를 가릴 수 있습니다. 브라우저는 이 수치를 env() CSS 함수를 통해 safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left로 제공하며, 모두 Baseline 광범위 지원 상태입니다. 완전한 엣지-투-엣지 렌더링을 위해서는 먼저 meta viewport 태그에 viewport-fit=cover를 추가한 뒤 env() 값을 padding이나 positioning에 적용해야 합니다. 기본 여백이 없으므로 calc(env(safe-area-inset-bottom) + 1rem) 형태로 여유 공간을 추가합니다. 또한 브라우저 크롬이 축소되어도 안정적인 예약 영역을 유지하는 Chromium 전용 신기능 safe-area-max-inset-*도 다루지만, 아직 Safari와 Firefox에서는 지원되지 않습니다. Chrome DevTools 반응형 뷰는 항상 0을 반환하므로, 기기별 올바른 inset 값을 에뮬레이션하는 Polypane 활용을 권장합니다.
Remy Sharp는 모달처럼 보이는 오버레이를 구현할 때 dialog 요소 대신 HTML popover 속성과 ::backdrop을 함께 사용하는 데서 발생하는 보안 관련 UX 버그를 문서화합니다. popover는 포커스나 포인터 이벤트를 가두지 않기 때문에, ::backdrop을 클릭하면 오버레이가 사라지는 것처럼 보이지만 실제로는 DOM에서 그 아래에 있는 요소로 클릭이 통과합니다. Sharp는 클릭재킹 방식의 데모로 이를 증명합니다. popover 뒤에 전체 화면 숨겨진 버튼을 배치하면, 사용자가 dismiss를 위해 클릭할 때 해당 버튼이 실행됩니다. 올바른 해결책은 ::backdrop이 클릭을 완전히 차단하는 dialog 요소를 사용하는 것입니다. Sharp는 팝오버가 강제할 수 없는 모달 의도를 불투명하거나 흐린 backdrop이 암시한다는 점에서 popover가 ::backdrop을 지원해야 하는지 자체를 문제 삼으며, Firefox의 solid backdrop 배경 버그도 제보되었음을 언급합니다.
이번 주 스타일링 분야는 Tailwind CSS가 중심이었습니다. v4.2와 v4.3이 동시에 공개되었는데, v4.2에서는 mauve, olive, mist, taupe 네 가지 중립 색상 팔레트, PostCSS 방식 대비 빌드 속도를 2배 이상 단축하는 전용 webpack 플러그인, 그리고 확장된 논리 속성 유틸리티가 추가되었습니다. v4.3에서는 scrollbar-width, scrollbar-color, scrollbar-gutter를 포괄하는 스크롤바 유틸리티, cqb/cqh 단위를 위한 @container-size 유틸리티, CSS zoom 속성용 zoom-* 유틸리티가 도입되었고, CSS 내 스택·복합 @variant 지원과 @utility의 --default() 기본값 지정 기능도 추가되었습니다.
레이아웃과 브라우저 기본 기능을 다룬 글도 여럿 눈에 띄었습니다. Ahmad Shadeed는 2023년 3월부터 Baseline 안정 상태인 Media Queries Level 4 범위 구문(width <= 300px, 300px <= width <= 500px)으로 즉시 전환할 것을 권장하며, 기존의 이중 브레이크포인트 모호성 버그를 해소할 수 있다고 설명합니다. Carmen Ansio는 Chrome 111 / Firefox 108 / Safari 15.4부터 지원되는 sin(), cos(), atan2() CSS 삼각함수를 활용해 JavaScript 없이 원형·호·나선 레이아웃을 구현하는 방법과 --angle 트랜지션을 위한 @property 등록의 필요성을 시연했습니다. Polypane 가이드는 노치를 고려한 모바일 레이아웃을 위한 viewport-fit=cover와 env()safe-area-inset-* 사용법, 그리고 Chromium 전용 safe-area-max-inset-*도 다루었습니다.
두 편의 짧은 글도 주목할 만합니다. Remy Sharp는 dialog 대신 popover와 ::backdrop을 모달 대용으로 쓸 때 포인터 이벤트가 차단되지 않아 클릭재킹에 취약하다는 보안 인접 문제를 문서화했습니다. 또 다른 글에서는 Space Toggle 해킹의 확장인 Cyclic Space Toggles를 소개하며, JavaScript 없이 약 95–97%의 브라우저에서 N 상태 boolean 단축 API를 구현하는 방법을 설명했습니다.
Key Takeaways
Tailwind CSS v4.3은 scrollbar-width, scrollbar-color, scrollbar-gutter 유틸리티와 cqb/cqh 단위를 위한 @container-size를 네이티브로 지원합니다. 한 번에 모두 활용하려면 지금 업그레이드하세요.
Media Queries Level 4 범위 구문(width <= 300px, 300px <= width <= 500px)은 2023년 3월부터 Baseline 안정 상태로, 이중 브레이크포인트 버그를 없애 줍니다. 지금 바로 전환하세요.
popover와 ::backdrop을 모달 대용으로 사용하면 포인터 이벤트가 차단되지 않아 클릭재킹 위험이 있습니다. ::backdrop이 클릭을 올바르게 차단하는 dialog를 사용하세요.
