프론트엔드
Tailwind CSS 사용기
두줄요약
Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다.\nPreflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.
구조와 흐름
- Tailwind의 utility-first 방식 활용 시 스타일시트 이동과 클래스 네이밍 부담 감소
- 디자인 명세의 px 단위와 기본 유틸리티 범위 불일치 시 theme extend 기반 프리셋 확장
- Preflight를 통한 브라우저 기본 스타일 초기화와 필요 시 비활성화 설정
주의할 점
- spacing, minWidth, fontSize 등 속성별 개별 theme extend 등록 필요
- 동일 요소의 충돌 클래스 우선순위가 className 작성 순서가 아닌 생성 CSS 순서에 의해 결정
- h1~h6, svg 등에 적용되는 Preflight 기본값에 따른 예상과 다른 렌더링 가능성
해결 방법
- 반복적인 arbitrary value를 px 프리셋 별칭으로 등록해 클래스 표현 단순화
- className 병합 시 twin.macro로 뒤쪽 클래스의 CSS 속성 덮어쓰기
- Headwind 플러그인으로 클래스 카테고리 정렬 및 중복 스타일 입력 방지
적용해볼 점
- 디자인 시스템의 단위와 자주 쓰는 크기를 기준으로 Tailwind 테마 구성
- 컴포넌트 기본 스타일과 전달 스타일의 충돌 가능성 사전 검토
- Tailwind v3 환경에서 복합 arbitrary value 사용 여부 검토
