Tailwind에서 색상 변수를 config에 정의해두면 좋은 점

프로젝트 초반에 bg-blue-500, text-gray-700 같은 기본 팔레트를 그냥 쓰다 보면, 나중에 색상 기준을 바꾸고 싶을 때 파일 전체를 뒤져야 한다. Tailwind config에 의미 있는 이름의 색상 변수를 정의해두면 이 문제가 사라진다.

tailwind.config.js에 색상 토큰 추가하기

theme.extend.colors에 프로젝트 전용 색상을 선언한다. 기본 팔레트를 덮어쓰지 않고 확장하는 것이 안전하다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#2563eb',
          light: '#3b82f6',
          dark: '#1d4ed8',
        },
        surface: {
          base: '#ffffff',
          muted: '#f8fafc',
          invert: '#0f172a',
        },
        text: {
          primary: '#0f172a',
          secondary: '#475569',
          disabled: '#94a3b8',
        },
      },
    },
  },
}

이렇게 정의하면 bg-brand, text-text-secondary, bg-surface-muted 같은 클래스를 바로 쓸 수 있다.

CSS 변수와 연결하는 방법

다크 모드나 테마 전환이 필요하다면 CSS 변수를 중간에 두는 방식이 더 유연하다.

/* globals.css */
:root {
  --color-brand: #2563eb;
  --color-surface: #ffffff;
  --color-text: #0f172a;
}

[data-theme='dark'] {
  --color-brand: #60a5fa;
  --color-surface: #0f172a;
  --color-text: #f1f5f9;
}

// tailwind.config.js
colors: {
  brand: 'var(--color-brand)',
  surface: 'var(--color-surface)',
  text: 'var(--color-text)',
}

CSS 변수만 바꾸면 모든 컴포넌트에 즉시 반영된다.

실질적으로 달라지는 것

색상 정의를 한 곳에서 관리하면 디자이너나 팀원이 "메인 색상을 좀 더 진하게 바꿔달라"는 요청을 받았을 때 config 한 줄만 바꾸면 된다. bg-blue-500이 소스 곳곳에 흩어진 상황이라면 grep으로 찾아서 하나씩 교체해야 하는데, 실수가 생기기 쉽다.

또 하나 좋은 점은 IDE 자동완성이다. bg-brand- 까지 치면 DEFAULT, light, dark가 드롭다운에 뜨고, 이름만 봐도 의도를 알 수 있다. bg-blue-600과 bg-blue-500이 각각 무엇을 의미하는지 기억하지 않아도 된다.

언제 토큰 없이 써도 되나

빠른 프로토타입이나 1회성 랜딩 페이지라면 기본 팔레트를 그대로 써도 크게 문제 없다. 색상 일관성을 관리할 필요가 없고, 유지보수 기간도 짧기 때문이다. 반면 지속적으로 업데이트하는 서비스라면 초반에 몇 줄 추가해두는 게 나중에 훨씬 편하다.