카카오엔터 FE팀, Tailwind CSS 도입 팁 공유

카카오엔터테인먼트 FE개발팀은 Tailwind CSS 도입 초기 신입 개발자들이 겪는 문제를 해결하기 위해 실무 팁을 공유했다. Tailwind의 utility-first 특성은 개발 속도를 높이지만, 초기 설정과 클래스 우선순위에서 혼란이 발생할 수 있다.

Arbitrary values 줄이기

디자인 명세가 px 단위인 경우 [14px] 같은 arbitrary value를 남용하면 가독성이 떨어진다. 이를 해결하려면 tailwind.config.js의 theme.extend에 px 프리셋을 등록해 p-8, text-12 등 축약된 클래스를 사용하도록 설정한다. 단, spacing, fontSize, minWidth 등 속성별로 별도로 등록해야 한다.

Preflight 처리

Preflight는 브라우저 기본 스타일을 초기화하여 디자인 시스템 충돌을 방지한다. h1~h6의 기본 margin이나 font-size를 inherit 또는 0으로 설정한다. 필요 시 tailwind.config.js에서 preflight: false로 비활성화할 수 있다.

클래스 우선순위와 twin.macro

Tailwind은 소스 코드 순서가 아닌 빌드된 CSS 순서에 따라 우선순위가 결정된다. 따라서 bg-black과 bg-white가 같은 요소에 있을 때 빌드 결과에 따라 우선순위가 달라질 수 있다. twin.macro를 사용하면 className에 선언된 클래스 중 뒤에 위치한 클래스가 최종적으로 적용되도록 보장한다. 단, twin.macro는 아직 Tailwind v3에서 완전히 지원되지 않으며 업데이트 중이다.

Headwind 플러그인

하나의 요소에 많은 CSS를 설정할 때 중복 기입을 방지하고 가독성을 높이기 위해 Headwind 플러그인을 사용할 수 있다. 알파벳 순이 아닌 스타일 카테고리별로 클래스를 정렬해준다.