피드로 돌아가기
Dev.toFrontend
원문 읽기
Tailwind v3 CSS Variable 제약 극복을 통한 Opacity Modifier 정상화
Token Deep Dive #2: The /50 That Did Nothing
AI 요약
Context
디자인 시스템의 Single Source of Truth 구축을 위해 모든 컬러 토큰을 CSS var()로 전환함. Tailwind v3의 JIT 컴파일러가 빌드 타임에 컬러 값을 분해하여 rgba()를 생성하는 특성으로 인해, 런타임에 결정되는 CSS 변수 적용 시 Opacity Modifier가 작동하지 않는 병목 현상 발생.
Technical Solution
- 하드코딩된 HEX 값이 필요 없는 Primitive Color는 기존 raw HEX 스트링으로 롤백하여 빌드 타임 분해 가능 구조 확보
- 테마 변경이 필요한 Semantic Color의 경우 Tailwind v3 전용 escape hatch인 'rgb(var(--variable) / )' 문법 도입
- build-time 파이프라인에 hexToRgb 헬퍼 함수를 추가하여 #F4F4F6 형태의 HEX 값을 '244 244 246' 형태의 공간 분리 RGB 값으로 자동 변환
- Figma 토큰 소스에서 추출한 값을 바탕으로 일반 CSS 변수와 -rgb 접미사가 붙은 채널 전용 변수를 동시에 생성하는 Dual-variable 전략 채택
- Semantic → Primitive → HEX로 이어지는 참조 체인을 해석하여 각 테마(Light/Dark)별 최적화된 RGB 채널 값을 자동 배포하는 파이프라인 설계
실천 포인트
1. Tailwind v3 사용 시 CSS 변수에 Opacity modifier(/50 등)를 적용하려면 반드시 RGB 채널 값만 포함된 별도의 변수를 정의했는지 확인하십시오.
2. 디자인 토큰 파이프라인 구축 시 빌드 타임(Static Analysis)과 런타임(Browser Resolution)의 처리 시점 차이를 고려하여 데이터 포맷을 설계하십시오.
3. CSS variable 기반 테마 시스템 도입 시 theme-specific CSS 파일의 import 누락 여부를 체크리스트에 포함하십시오.