Tailwind에서 벗어나며 CSS 구조화 배우기

Context

Tailwind CSS의 유틸리티 중심 접근 방식에서 벗어나 지속 가능한 스타일 관리 체계 구축 필요성 대두. Preflight 스타일 및 특정 유틸리티 클래스에 대한 강한 의존성을 유지하면서도 스타일의 응집도를 높이는 구조적 전환 시도.

Technical Solution

• CSS Reset 전략: Tailwind Preflight의 핵심 규칙을 추출하여 초기 스타일 기반을 마련한 초기 환경 설정
• 컴포넌트 기반 격리: 개별 컴포넌트 파일에 스타일을 정의하고 고유 클래스를 부여하여 스타일 간 간섭을 최소화한 구조 설계
• Design Token 시스템: CSS 변수를 활용한 색상 및 폰트 크기 체계 정의로 Tailwind의 추상화된 크기 단위를 바닐라 CSS로 이식
• 상향식 Base 스타일링: 개별 컴포넌트에서 공통 패턴을 추출해 Base 스타일로 옮기는 Bottom-up 방식의 스타일 최적화
• 레이아웃 유연성 확보: 미디어 쿼리 의존도를 낮추기 위해 CSS Grid의 auto-fit과 minmax를 활용한 반응형 레이아웃 구현
• 가벼운 빌드 파이프라인: 웹 표준 @import 문을 활용하되 프로덕션 단계에서 esbuild의 정적 Go 바이너리를 통한 번들링 처리