본문에서는 재사용 가능한 CSS 클래스 작성에 있어 기존 방식의 문제점을 분석하고, Tailwind CSS v4의 새로운 지시어를 활용한 혁신적인 해결책을 제시합니다.
기존 접근 방식의 문제점
-
Basecoat: 모든 변형을 한 줄에 묶고 상태 스타일을 대괄호 표기법으로 혼합하여 가독성이 낮고,
@layer를 사용해 트리 쉐이킹이 불가능하며 Tailwind IntelliSense가 클래스를 인식하지 못합니다. -
DaisyUI:
@apply와 순수 CSS를 혼합하고 사용자 정의 속성을 광범위하게 사용하며, 복잡한 레이어 구조 내에 중첩되어 유사한 문제점을 안고 있습니다.
이러한 방식들은 다음과 같은 공통적인 문제점을 야기합니다.
-
트리 쉐이킹 불가:
@layer는 사용 여부와 관계없이 모든 클래스를 포함하여 번들 크기를 증가시킵니다. -
자동 완성 미지원: Tailwind IntelliSense가 사용자 정의 클래스를 인식하지 못해 개발자의 발견 가능성을 저해합니다.
-
가독성 저하:
focus-visible:및dark:aria-invalid:와 같은 접두사가 혼재되어 상태 스타일을 파악하기 어렵습니다.
저자의 새로운 접근 방식
저자는 Tailwind CSS v4의 @utility, @apply, @variant 지시어와 CSS :where() 셀렉터를 결합하여 이러한 문제들을 해결합니다.
-
@utility를 통한 트리 쉐이킹 및 자동 완성:@utility로 정의된 클래스는 실제로 사용될 때만 번들에 포함되어 트리 쉐이킹을 가능하게 하고, IntelliSense에 등록되어 자동 완성을 지원합니다. 이는 Tailwind의 핵심 계약을 준수하는 방식입니다. -
ui-접두사를 통한 명확한 의도:ui-와 같은 접두사를 사용하여 클래스의 목적(제로 특이성을 가진 시각적 패턴)을 명확히 하고, 자동 완성 시 시스템 내 모든 기능을 쉽게 발견할 수 있도록 돕습니다. -
:where()를 통한 제로 특이성::where(.ui-badge)와 같이:where()를 사용하면 특이성 값이 0이 되어, 유틸리티 클래스(예:bg-red-500)가 항상 우선시되어 충돌 없이 기본값을 재정의할 수 있습니다. -
@variant를 통한 가독성 높은 상태 스타일:focus-visible,aria-invalid,dark등 각 상태에 대한 스타일을 별도의 블록으로 분리하여 가독성을 크게 향상시킵니다. 이는 Svelte/Vue<style>블록에서 발생하는 콜론 파싱 문제를 회피하는 실용적인 이점도 제공합니다. -
@apply를 통한 완벽한 호환성:@apply를 사용하여 Tailwind 테마의 색상, 간격, 타이포그래피 등을 참조함으로써, 사용자의 커스터마이징된 테마와 완벽하게 호환되는 컴포넌트를 만들 수 있습니다. 이는 DaisyUI와 같이 자체적인 커스텀 속성을 정의하여 발생하는 마찰을 제거합니다.
이러한 접근 방식은 시맨틱 CSS 클래스가 유틸리티와 함께 발견 가능하고, 트리 쉐이킹이 가능하며, 가독성이 높고, 구성 가능하도록 만듭니다.