Tailwind CSS 사용기
프론트엔드
Tailwind CSS 사용기
두줄요약
Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.
구조와 흐름
- Tailwind 기본 유틸리티 범위 밖의 px 단위 값에 대한
theme.extend프리셋 등록 - Preflight의 브라우저 기본 스타일 초기화와
@tailwind base기반 적용 구조 - 동일 CSS 속성 클래스 병합 시 Tailwind 빌드 결과의 고정된 선언 순서에 따른 우선순위
선택 이유
- 스타일시트 왕복과 시맨틱 클래스명 고민 감소를 통한 개발·수정 속도 향상
twin.macro의 뒤쪽 클래스 우선 처리로 컴포넌트 기본 스타일과 전달 스타일의 경합 해소- Headwind의 카테고리 기반 클래스 정렬을 통한 중복 스타일 인지 지원
주의할 점
spacing외minWidth,minHeight,fontSize,borderWidth,lineHeight별 개별 extend 필요- h1~h6, svg 등의 Preflight 적용 스타일과 비활성화 옵션 확인 필요
- Tailwind 클래스 문자열의 작성 순서와 실제 CSS 우선순위 불일치
적용해볼 점
- 디자인 단위를 통일한 뒤 자주 쓰는 수치를 테마 프리셋으로 등록
- 자유로운
classNameprops 설계 시 동일 속성 충돌 처리 방식 명시 - 긴 클래스 목록에 정렬 플러그인 적용 검토
