디자인 시스템이 무너질 때, Tailwind로 유연하게 대응하는 법

// tailwind.config.js
theme: {
  extend: {
    colors: {
      campaign: {
        primary: '#ff3c00',
        secondary: '#ffe8e0',
      }
    }
  }
}

Tailwind CSS를 쓰다 보면 “와, 이거 진짜 빠르고 편하다!” 싶을 때가 많죠.
디자인 시스템 기반으로 클래스만 조합하면 바로 UI가 완성되고,
CSS 파일 따로 안 만들고도 컴포넌트 개발을 뚝딱 해낼 수 있으니까요.

그런데 실무에서는 꼭 이런 상황이 생깁니다:

• 브랜드 캠페인이나 이벤트 페이지
• 강한 브랜딩이 필요한 프로모션 섹션
• 특정 시즌이나 트렌드에 맞춘 비주얼 요구

이럴 때는 기존의 디자인 시스템을 벗어난 스타일이 요구되고,
“어… 이건 시스템으로는 커버가 안 되는데?” 하는 일이 자주 발생합니다.
Tailwind로만 깔끔하게 유지하던 스타일 구조가,
순식간에 무너지는 기분이 들죠.

그럼 이런 상황에서는 어떻게 대응하면 좋을까요?

---

 

🎯 목표는 “유연하게 대응하면서도 시스템을 지키는 것”

Tailwind는 유틸리티 기반이라 확실히 빠르긴 하지만,
설계 없이 예외 스타일을 덕지덕지 붙이기 시작하면
곧바로 유지보수 지옥이 펼쳐집니다.

그래서 중요한 건:

디자인 시스템은 기본으로 유지하면서,
예외적인 요구는 구조적으로 유연하게 대응하는 것.

Tailwind를 잘 활용하면 이게 충분히 가능합니다.

---

 

✅ 실무에서 자주 쓰는 Tailwind 예외 대응 전략 5가지

1. @layer로 캠페인 스타일 따로 분리하기

Tailwind는 @layer 기능을 통해 스타일 우선순위를 컨트롤할 수 있어요.
캠페인용 스타일만 따로 관리하면,
기존 디자인 시스템을 건드리지 않고도 원하는 스타일을 덧붙일 수 있습니다.

/* campaign.css */
@layer components {
  .campaign-heading {
    @apply text-[48px] font-extrabold text-[#ff3c00];
  }

  .campaign-button {
    @apply px-6 py-3 rounded-full bg-[#ff3c00] text-white hover:bg-[#d93200];
  }
}

이렇게 분리해두면 디자인 팀과 협업할 때도 훨씬 명확해져요.

2. JIT 유틸리티로 한정된 스타일만 빠르게 적용하기

Tailwind JIT 모드를 사용하면, 아래처럼 인라인에서 자유롭게 수치를 조절할 수 있습니다.

<div class="text-[40px] tracking-[0.03em] text-[#ff6600] font-bold">
  キャンペーン開催中！
</div>

이런 방식은 “한 번 쓰고 끝날” 스타일에 잘 어울려요.
하지만 반복되거나 여러 곳에서 쓰일 예정이라면, @layer나 컴포넌트 추출이 더 좋습니다.

3. clsx나 tailwind-variants로 조건 분기 처리하기

예외 스타일이 있는 컴포넌트를 분기 처리할 땐, clsx나 tailwind-variants를 쓰면 깔끔하게 정리할 수 있어요.

const headingClass = clsx(
  "text-2xl font-semibold",
  isCampaign && "text-[48px] text-[#ff3c00] tracking-tight"
);

혹은 더 구조적인 방식이 좋다면:

const heading = tv({
  base: "font-semibold",
  variants: {
    type: {
      default: "text-2xl",
      campaign: "text-[48px] text-[#ff3c00] tracking-tight",
    }
  }
});

이렇게 하면 UI 컴포넌트 내에서도 디자인 시스템 기반 + 예외 대응을 동시에 다룰 수 있어요.

4. tailwind.config.js에서 토큰을 확장해서 관리하기

예외 스타일이 반복될 것 같다면, 아예 Tailwind의 설정을 확장해서 관리하는 것도 좋아요.

// tailwind.config.js
theme: {
  extend: {
    colors: {
      campaign: {
        primary: '#ff3c00',
        secondary: '#ffe8e0',
      }
    }
  }
}

<button class="bg-campaign-primary hover:bg-campaign-secondary">
  応募する
</button>

이렇게 하면 기존 디자인 시스템을 깨지 않고,
캠페인만의 “확장된 토큰”으로 정리할 수 있어요.

5. 팀 안에서 “예외 디자인 처리 기준”을 정해두기

마지막으로 가장 중요한 건, 팀의 기준을 명확히 정해두는 것이에요.

예를 들어 이런 식의 가이드라인이 있으면 좋아요:

• ✅ 기본은 Tailwind 유틸리티만 사용
• ✅ 예외는 campaign-* 클래스 또는 별도 CSS 파일로 관리
• ✅ 반복성 있는 스타일은 디자인 시스템에 흡수 고려
• ❌ 인라인 스타일(style="")이나 !important는 지양

이런 기준이 있으면, 실무에서 “이건 시스템에 넣을까, 그냥 예외 처리할까?”를 결정하는 게 훨씬 쉬워져요.

---

 

✍️ 정리하며

Tailwind는 규칙을 잘 지키면서 사용하면 빠르고 일관성 있는 UI 구현이 가능한 강력한 도구입니다.
하지만 현실적인 요구는 언제나 시스템 밖에 있기 마련이죠.

디자인 시스템을 완전히 깨버리는 게 아니라,
“예외를 예외로 다룰 수 있도록 구조를 갖춰두는 것”,
그게 Tailwind를 실무에서 진짜 잘 쓰는 방법이라고 생각합니다.