테일윈드(TailwindCSS)에 커스텀 CSS 배치하기

 

서론

Tailwind CSS를 사용할 때 가장 자주 묻는 질문 중 하나는 Tailwind의 내장 지시문과 자신의 커스텀 CSS를 어떻게 배치해야 하는가 하는 것입니다. Tailwind는 계층화된 접근 방식을 따르기 때문에 @tailwind 지시문과 자신의 코드가 포함되는 순서는 최종 스타일의 모양과 느낌에 큰 영향을 미칠 수 있습니다. 이 글에서는 Tailwind의 권장 구조를 분해하고, 원하는 시각적 결과를 얻기 위해 커스텀 CSS를 어떻게 배치해야 하는지 설명하겠습니다.

 

Tailwind의 계층화된 접근 방식

Tailwind의 핵심 철학은 스타일의 계층을 깔끔하고 확장 가능하게 구축하는 것입니다. Tailwind 스타일시트를 설정할 때 주로 접하게 되는 세 가지 주요 지시문은 다음과 같습니다:

1. @tailwind base

이 지시문은 Tailwind의 기본 스타일과 리셋을 포함합니다. 다양한 브라우저 간의 일관된 시작점을 보장합니다.

2. @tailwind components

이 지시문은 Tailwind의 사전 구축된 컴포넌트 스타일을 불러옵니다. 폼이나 타이포그래피 같은 요소에 대한 보다 의견적인 스타일을 제공합니다.

3. @tailwind utilities

마지막으로, 이 지시문은 Tailwind의 광범위한 유틸리티 클래스를 삽입하여 HTML 내에서 직접 빠르고 유연한 스타일링을 가능하게 합니다.

 

CSS의 권장 배치 순서

커스텀 코드를 어디에 배치해야 할지 이해하려면, 무엇을 달성하려는지를 고려하세요:

 

1. 기본 스타일 (@tailwind base)

이 초기 스타일은 기초를 설정합니다. 기본 타이포그래피를 조정하거나 일부 기본 스타일을 제거/리셋해야 하는 경우, 커스텀 CSS를 @tailwind base 이후에 배치할 수 있습니다.

그러나, 대부분의 경우 이러한 기초 스타일을 직접 수정할 필요는 없습니다. 대신, 다른 계층을 활용하여 필요한 부분을 조정하고 덮어씁니다.

 

2. 컴포넌트 (@tailwind components)

기본 스타일 이후, Tailwind는 컴포넌트 스타일을 삽입합니다. 버튼을 스타일링하거나 카드 레이아웃을 수정하는 등 이러한 컴포넌트를 커스터마이징하거나 확장하려면, @tailwind components 바로 다음에 커스텀 컴포넌트 수준의 스타일을 배치할 수 있습니다.

이 위치에 코드를 배치하면 Tailwind가 이미 설정한 컴포넌트 클래스를 활용하여 유틸리티 계층이 적용되기 전에 필요에 따라 조정할 수 있습니다.

 

3. 커스텀 CSS (유틸리티 전)

커스텀 스타일이 Tailwind의 유틸리티를 덮어쓸 필요가 없는 경우, 이를 @tailwind components 바로 다음에, @tailwind utilities 전에 안전하게 추가할 수 있습니다. 이 배치는 고유한 클래스를 정의하거나 컴포넌트 스타일을 수정하면서 뒤따르는 유틸리티 계층에 영향을 받지 않게 합니다.

 

4. 유틸리티 (@tailwind utilities)

유틸리티 지시문은 Tailwind의 모든 유틸리티 클래스를 불러옵니다. 이는 flex, pt-4, text-center와 같은 저수준 스타일로, HTML에서 직접 조합하여 거의 모든 디자인을 만들 수 있습니다.

일반적으로 이러한 유틸리티 클래스를 마크업에서 직접 사용하지만, 특정 유틸리티를 덮어써야 하는 경우가 있을 수 있습니다. 예를 들어, 간격 스케일을 재정의하거나 커스텀 변형을 추가하고 싶을 때, @tailwind utilities 이후에 커스텀 코드를 배치하면 Tailwind의 기본 스타일보다 우선적으로 적용됩니다.

 

어디에 배치할지 확실하지 않을 때는?

커스텀 코드를 어디에 배치해야 할지 확실하지 않은 경우, @tailwind utilities 이후에 배치하는 것이 안전한 선택입니다. 이렇게 하면 Tailwind의 모든 기본 계층이 먼저 적용되므로, 필요한 부분을 덮어쓸 때 어떤 계층이 상단에 있는지 고민할 필요 없이 손쉽게 커스터마이징할 수 있습니다.

 

실용적인 예시

다음은 Tailwind 지시문과 함께 커스텀 CSS를 최적의 순서로 배치한 예시 스타일시트입니다:

@tailwind base;
@tailwind components;

/* 여기에 커스텀 스타일 추가 */
/* 예시: Tailwind의 컴포넌트 계층에서 설정된 카드 컴포넌트 스타일링 */
.card {
  @apply bg-white rounded-lg p-6 shadow-md;
}
.card-title {
  @apply text-xl font-semibold text-gray-800;
}

@tailwind utilities;

/* 유틸리티를 덮어쓰거나 재정의하려면 여기에 추가 */
/* 예시: 간격 스케일을 변경하는 커스텀 유틸리티 */
.mt-custom {
  margin-top: 3rem;
}

 

이 예시에서는:

• 기본 및 컴포넌트 계층을 먼저 설정했습니다.

• 유틸리티 계층 전에 컴포넌트 관련 커스텀 스타일을 추가했습니다. 이를 통해 Tailwind의 유틸리티와 원활하게 혼합할 수 있습니다.

• 선택적으로, 유틸리티 계층 이후에 추가적인 유틸리티 클래스를 배치하여 유틸리티 계층을 덮어쓰거나 확장할 수 있습니다.

 

단, Swiper와 같은 다른 외부 라이브러리의 경우 별다른 이유가 없다면 테일윈드 관련 코드가 모두 선언된 이후에 삽입하는 것이 권장됩니다.

@tailwind base;
@tailwind components;

/* Your custom styles here */

@tailwind utilities;

/* Import Swiper styles */
@import 'swiper/swiper-bundle.min.css';

 

결론

Tailwind의 계층화된 접근 방식을 이해하고 따라가는 것은 처음에는 복잡해 보일 수 있지만, 작동 순서를 이해하면 스타일을 구조화하는 강력한 도구가 됩니다. 커스텀 CSS를 적절한 계층 과정—컴포넌트 관련 조정이 필요한 경우 @tailwind components 이후, 유틸리티 덮어쓰기가 필요한 경우 @tailwind utilities 이후—에 배치하면 원하는 대로 스타일을 적용할 수 있습니다.

 

주요 포인트:

• @tailwind base와 @tailwind components를 사용하여 견고한 기초를 구축하세요.

• 커스텀 컴포넌트 수준의 스타일은 @tailwind components 이후, @tailwind utilities 이전에 추가하세요.

• 확신이 서지 않을 경우, 커스텀 코드를 @tailwind utilities 이후에 배치하여 덮어쓰기가 우선되도록 하세요.

 

이러한 모범 사례를 염두에 두면 Tailwind로 구동되는 프로젝트에서 깔끔하고 조직적이며 예측 가능한 CSS를 유지하는 데 큰 도움이 될 것입니다.