🎨 TailwindCSS 설정 제대로 알기 — tailwind.config와 globals.css의 차이

🤔 내가 겪은 궁금증

처음 TailwindCSS를 써보면서 tailwind.config.js에서 폰트 사이즈, 색깔을 지정해두고,
globals.css에서도 같은 색을 :root 변수로 선언하는 구조를 봤다.


"그냥 globals.css에서 색, 폰트 다 정의하면 안 되는 거 아냐? 왜 config에서 또 따로 지정하는 거지?"
라는 궁금증이 생겼고, 그걸 파보면서 정리한 내용을 공유한다.

🧩 tailwind.config.js는 어떤 역할을 할까?

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#3D9EF2',
        },
      },
      fontSize: {
        '14-m': ['1.4rem', { fontWeight: 500 }],
      },
    },
  },
};

tailwind.config.js는 Tailwind의 핵심 설정 파일이다.
이 안에 정의한 값들은 자동으로 Tailwind 유틸리티 클래스가 되어 JSX/HTML에서 바로 사용 가능하다.

예를 들어 위 설정을 하면 아래처럼 쓸 수 있다

<p className="text-14-m text-brand-500">커스터마이징된 클래스</p>

🎨 그런데 왜 globals.css에도 같은 색을 또 정의하지?

/* globals.css */
:root {
  --brand-500: #3d9ef2;
  --gray-200: #c6c8cf;
}

이유는 딱 하나!

Tailwind 유틸리티가 아닌 전역 스타일에서 색을 써야 할 때를 대비해서이다!
예시:

• 스크롤바 커스텀 (Tailwind로 못 함)
• 자바스크립트에서 style 속성으로 넣는 경우
• styled-components 등 CSS-in-JS 사용할 때

그럴 땐 var(--brand-500) 같은 CSS 변수가 필요하니까, globals.css에서 선언해주는 것.

🔄 tailwind.config 기반 vs CSS 변수 방식 비교

구분	tailwind.config.js	globals.css
목적	유틸리티 클래스 설정	전역 CSS 변수 선언
사용 방식	className="text-brand-500"	style={{ color: 'var(--brand-500)' }}
커버 범위	Tailwind 내부 전용	전역 스타일, JS 등에서 접근
유지보수	디자인 시스템 통일에 강함	특수 상황 대응용

⚙️ 실제 사용 예시

✅ Tailwind 유틸리티 방식

<h1 className="text-14-m text-brand-500">타이틀</h1>

• config에서 정의한 fontSize와 color를 유틸리티로 바로 사용
• 유지보수와 통일성이 좋음
  
  

✅ CSS 변수 방식

<h1 style={{ color: 'var(--brand-500)' }}>타이틀</h1>

• 동적으로 스타일 조정하거나, Tailwind로 커버 못하는 영역에 유용

✅ 마무리 요약

• Tailwind는 유틸리티 퍼스트 CSS 프레임워크다.
• 커스터마이징은 tailwind.config.js에서 하고,
• 전역 접근이나 특별한 스타일이 필요할 땐 globals.css에서 CSS 변수 선언을 한다.
• 두 설정은 목적이 다르기 때문에 같이 써야 한다.

🧑‍💻 내가 프로젝트하면서 느낀 점

처음엔 왜 두 군데 정의하나 싶었는데,
직접 styled-components에서 색을 쓰거나,
scrollbar 스타일 바꿀 때 var(--gray-200) 쓰고 나서야 이해가 됐다.

Tailwind는 유틸리티로 통일성을 주고,
CSS 변수는 예외 상황을 커버하는 보조 수단이라는 걸 기억하면 좋을 것 같다!