Tailwind CSS 스타일 재사용하는 방법

Reusing Styles - Tailwind CSS

 
Tailwind CSS 공식 문서에서 있는 Reusing Styles에 있는 내용을 내 나름대로 정리해보는 포스팅이다. 전문 번역은 아니고 필요한 내용에 대한 일부 번역임을 밝힌다. 
 

---

 

1. 에디터 및 언어 기능 사용 

재사용해야 하는 스타일을 단일 파일 내에서만 재사용하는 경우, 에디터의 다중 커서 편집 기능과 언어별 루프를 사용하는 것이 중복을 관리하는 가장 간단한 방법이다. 
 
 

2. 컴포넌트 추출

여러 파일에서 일부 스타일을 재사용해야 하는 경우 가장 좋은 전략은 React, Svelte 또는 Vue와 같은 프론트엔드 프레임워크를 사용하는 경우 컴포넌트를, Blade, ERB, Twig 또는 Nunjucks와 같은 템플릿 언어를 사용하는 경우 템플릿 부분(template partial)을 만드는 것이다. 
 
컴포넌트를 만들면 원하는 만큼 여러 곳에서 사용할 수 있으며, 스타일에 대한 single source of truth를 유지하면서 한 곳에서 쉽게 업데이트할 수 있다. 
 
 

3. @apply 로 클래스 추출

ERB나 Twig와 같은 전통적인 템플릿 언어를 사용하는 경우 버튼처럼 작은 걸 만들면서 템플릿 부분을 만드는 작업이 btn과 같은 간단한 CSS class에 비해 과하게 느껴질 수 있다.

더 복잡한 컴포넌트에는 적절한 템플릿 부분을 만드는 것이 좋지만, 템플릿 부분이 과하다고 느껴질 때는 Tailwind의 @apply 지시어를 사용하여 반복되는 유틸리티 패턴을 사용자 정의 CSS class에 추출할 수 있다.

다음은 @apply를 사용하여 기존 유틸리티에서 작성된 btn-primary 클래스의 모습이다. 
 

<!-- Before extracting a custom class -->
<button class="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

 
Functions & Directives에서 @apply 나 @layer 에 대해 더 자세히 알아볼 수 있다. 
 
 
성급한 추상화 피하기
무엇을 하든 그저 '깔끔하게' 보이기 위해 @apply를 사용하지 말자. Tailwind 클래스로 가득 찬 HTML 템플릿은 보기 흉한 것이 사실이다. 수많은 커스텀 CSS가 있는 프로젝트에서 무언가를 변경하는 것은 더 최악이다.

모든 것에 @apply를 사용하기 시작하면 기본적으로 CSS를 다시 작성해야 하고, 예를 들어 Tailwind가 제공하는 워크플로우와 유지보수성 등의 이점을 모두 버려야 한다. 
 
- 항상 class 이름을 생각해야 한다. 이름을 붙일 필요가 없는 것에 class 이름을 붙이는 것만큼 작업 속도를 늦추거나 에너지를 소모하는 것도 없다.
 
- 변경을 하려면 여러 파일을 넘나들며 이동해야 한다. 이는 모든 것을 한 파일에 같이 배치하기 전에 생각했던 것보다 훨씬 더 큰 워크플로우 방해 요소다.
 
- 스타일 변경 작업이 더 무서워진다. CSS는 전역적인데 사이트의 다른 부분을 손상시키지 않고 해당 클래스의 최소 너비 값을 변경할 수 있을까?
 
- CSS 번들이 더 커지게 마련이다. 
 
@apply를 사용하려면 button이나 form 컨트롤처럼 아주 작은 단위이면서 재사용 가능성은 아주 높은 것, 그리고 컴포넌트가 더 나은 선택이 될 수 있는 React와 같은 프레임워크를 사용하지 않는 경우에만 사용하는 것을 권장한다.
 
 
 
📚 같이 읽으면 좋은 포스팅

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블

Tailwind CSS 상수화 및 커스텀 스타일 정의