Tailwind CSS 사용기

카카오엔터테인먼트 FE개발팀이 Tailwind CSS를 도입하면서 실제로 겪은 문제와 해결 팁을 공유한다. Tailwind 소개나 장단점 비교보다 "막 시작하는 단계에서 미리 알아두면 좋은" 실용적인 노하우에 집중한다.

핵심 포인트 - Arbitrary values 남용 문제: px 단위 디자인 명세를 쓸 때 p-[8px] h-[35px] text-[12px] 같은 arbitrary value가 반복되어 코드 가독성 저하 - 해결법 — theme extend 프리셋: tailwind.config.js의 theme.extend에 0~200px 범위 px 프리셋을 배열로 한 번에 등록. 이후 p-8 h-35 text-12 처럼 간결하게 사용 가능 - 주의: spacing(padding/margin/width/height 등)과 fontSize, borderWidth, lineHeight, minWidth, minHeight는 별도로 extend에 등록해야 함 — spacing 하나로 통합 안 됨 - Tailwind v3 업데이트: flex-[2_2_0%], col-[2/-2] 처럼 여러 숫자를 조합하는 arbitrary value도 지원 — 경우의 수 많은 케이스는 v3에서 arbitrary value 적극 활용 권장 - Preflight 처리: Tailwind 기본 CSS 리셋(Preflight)이 기존 글로벌 스타일과 충돌하는 경우 대응 방법

상세 정리 - utility-first의 실질적 장점: 스타일시트 파일 컨텍스트 스위칭 제거, 클래스명 고민 시간 없음, 수정 시 CSS 적용 현황 한눈에 파악 - px 프리셋 등록 코드: Array.from(Array(201)).map((_,i) => i+"px")를 스프레드로 객체화 → extend에 등록 - rem 단위 기반 설계라면 프리셋 등록 불필요하지만 디자인 명세가 px 기반이면 프리셋이 유용 - 프리셋 등록 후 장점: 디자인 명세 수치를 그대로 클래스명에 적용 가능. 단위 변환 불필요 - Preflight 비활성화: tailwind.config.js의 corePlugins.preflight: false로 완전 비활성화 가능. 특정 요소만 제외하는 방법도 있음 - Tailwind IntelliSense 플러그인: VSCode에서 클래스 자동완성 제공. extend에 등록한 커스텀 값도 자동완성 지원 - 팀 내 도입 시 신입 개발자도 동일한 문제를 겪었다는 관찰 — 사전에 팀 컨벤션 문서화 효과적

왜 읽나: Tailwind CSS를 실제 도입한 팀에서 빈번하게 발생하는 arbitrary value 남용 문제를 theme extend 프리셋으로 해결하는 구체적인 코드 예시를 통해 팀 도입 전에 놓치기 쉬운 설정을 미리 갖출 수 있다.