tailwindCSS @apply으로 스타일 추출할 때 주의사항

김민아·2022년 12월 14일

Extracting classes with @apply

프로젝트에서 처음으로 tailwindCSS를 사용하게 되었을 때, 가장 큰 고민은 팀원들과 공통 컴포넌트에 스타일을 재사용하는 방법이었다. Reusing Styles 페이지에 나오는 몇가지 방법 중 @apply로 클래스 추출하기 항목을 적용해 보기로 했다. 다른 얘기지만, tailwindCSS 입문에서 러닝커브가 낮았던 것도 low-level 유틸리티 클래스로 직관적이어서도 있지만, 개인적으로 친절한 공식 문서에 한 표를 주고 싶다. 👏

@apply 주의사항

공식에도 나오지만 @apply는 흡사 기존 css 파일을 작성하는 것과 같아서 tailwindCSS의 핵심 가치에 이율배반적일 수 있다!

예를 들면, 클래스명을 고민할수도 있고, css 파일을 오가며 어느 부분에 적용되어 있는 클래스인지 확인해야 하며, 사이드 이펙트를 고려하며 사용해야 하고, css 번들이 커질 수도 있다. 👉 여기

팀원들에게 이런 방법이 있는데~ 라고 소개했을 때, 가장 먼저 얘기가 나왔던 부분이기도 하다.

단지 깔끔하게 보이기 위해서 @apply를 사용하지 말자.
tailwindCSS는 보기 안좋다. 하지만 커스텀 CSS로 도배된 프로젝트를 변경하는 것은 더 나쁘다.
버튼과 폼 양식같은 아주 작고, 재사용이 많이 되는 곳에만 쓰자.
특히 컴포넌트화가 잘 되어 있는 예를 들면 리액트같은 프레임워크에서는 사용하지 말자.

그럼에도 불구하고 @apply를 적용한 이유는 첫번째 프로젝트에서 느낀 바가 컸기 때문이었는데, 버튼같은 작은 단위까지 공통 컴포넌트로 맞추는 것이 어려워서 스타일링하는 방법이 제각각이었기 때문이었다. 부끄럽지만 당시에는 해당 버튼은 .xx-xxx 클래스로 정했다고 전달하는 편이 간편했다.

프로젝트 초기에

첫번째 프로젝트에서 경험하고 두번째 프로젝트에서 개선하고자 했던 부분들이 마치고 보니, 결과적으로 개선되지 않았던 것 같다. 다음은 나름의 규칙이었는데,

1. 스타일을 재사용할 요소를 정하자

figma로 Hi-Fi 프로토타입을 제작하고, 버튼, 폼, 카드 등의 스타일이 중복되는 요소를 스타일링하여 사전에 공유했다.

2. custom 클래스에는 prefix를 붙이자

망고의 약자인 .mg- 접두어를 시작으로 요소-속성으로 클래스명을 정하자는 규칙을 세웠다.

/* global.css */

/* ... */

/* Buttons */
.mg-primary-button {
    @apply px-12 py-3 text-center text-white rounded bg-primary-normal hover:bg-primary-hover;
}

.mg-primary-button.disabled {
    @apply border rounded text-mono-textDisabled bg-mono-bgDisabled hover:bg-mono-bgDisabled border-mono-borderDisabled;
}

.mg-primary-button-round {
    @apply px-10 py-3 text-white rounded-full bg-primary-normal hover:bg-primary-hover;
}

/* ... */