tailwind 커스텀 변수 overriding이 아닌 extending으로 적용하기

오늘도 즐겁게 프로젝트 중. 칸반보드를 만들고 있다.

💁🏻‍♀️ too long? click HERE

🚨 문제 상황

유저가 속한 모든 팀의 이슈를 한번에 볼 수 있는 칸반보드를 만들고 있다. 여러 팀의 이슈들이 섞여있기 때문에 팀 정보는 색깔로 구분하고 있다. UI 작업을 하다가 문제를 맞닥뜨렸다. 참고로 우리 팀은 tailwind CSS를 사용하고 있다.

⬇️ 피그마 시안

디자이너분께서 작업해주신 피그마 시안대로라면 이런 식으로 버튼 부분이 해당하는 팀의 색상으로 나와야 하는데,

⬇️ 내 작업물

아니 웬걸 @_@ 버튼 색상이 적용이 되지 않는다.

분명 팀 이런 식으로 색상 변수를 전달해주었고,

const { teamColor, teamName } = issueData;

// ... 

<button className={`text-[${teamColor}] border-[${teamColor}]`}>
  {teamName}
</button>

개발자 도구에서 확인해보아도 해당하는 색상값이 잘 들어가있다.

🤔 문제 원인

무엇이 원인인지 찾기 위해 이리저리 값을 바꾸어보았다. 동적으로 색상값을 받아오는 게 문제인가 싶어 tailwind에 지정된 다른 색상 변수를 넣어보았는데,

<button className={`text-red-500`}>
  {teamName}
</button>

이상하게도 여전히 적용이 안 되는 것.
그렇다면 색상값을 동적으로 받아오는 문제 때문이 아니라(사실 그 문제도 맞긴한데..) 어떤 다른 문제가 있다는 건데.. 그런데 혹시나 해서 우리 프로젝트에서 지정한 색상 변수로 지정해보았는데

<button className={`text-point_red`}>
  {teamName}
</button>

이번엔 또 적용이 된다. 오호...

이건 또 적용이 되는 걸 보니 색상 변수를 정의해준 부분에 문제가 있을까 싶어 tailwind.config.js 파일 관련하여 서치해보다가 Tailwind CSS 문서의 Theme Configuration 파트에서 원인을 찾았다.

지금 우리 프로젝트의 tailwind.config.js 파일을 보면

  theme: {
    colors: {
      point_yellow: '#F3FF00',
      point_red: '#F74242',
      // ...,
    },
    fontSize: {
      'body1-bold': ['1.8rem', { lineHeight: '2.6rem', fontWeight: 700 }],
      'body1-medium': ['1.8rem', { lineHeight: '2.6rem', fontWeight: 500 }],
       //...
    }

theme 객체의 값으로 바로 커스텀 변수를 정의한다. 그런데 이런 방식으로 정의할 경우 테일윈드가 제공하는 default theme을 내가 추가한 theme으로 대체해버린다. 그래서 테일윈드의 기본 컬러 변수였던 text-red-500는 우리 프로젝트에서 새로 지정해준 색상값 때문에 덮어 씌워져 적용이 안 됐던 것이다. 대체된 theme에 속해 있던text-point_red는 적용이 되었던 이유.

⬇️ Overriding the default theme

🤗 문제 해결

그렇다면 기존 테일윈드 변수들에 커스텀 변수를 덮어씌우는 것이 아닌 추가해주려면 어떻게 해야 할까?

theme 객체 안에 바로 정의하지 않고 theme.extend 프로퍼티 객체를 통해 지정해주면 된다. 이렇게 하면 "Overriding"이 아닌 "Extending"의 개념으로 커스텀 변수를 지정할 수 있다.

⬇️ Extending the default theme

우리 프로젝트의 tailwind.config.js도 위와 같이 수정해주었다.

  theme: {
    extend: { // 추가!
      colors: {
        point_yellow: '#F3FF00',
        point_red: '#F74242',
        // ...,
      },
      fontSize: {
        'body1-bold': ['1.8rem', { lineHeight: '2.6rem', fontWeight: 700 }],
        'body1-medium': ['1.8rem', { lineHeight: '2.6rem', fontWeight: 500 }],
         //...
      }
    }

이렇게 이 문제는 해결이 되었다!

그런데 ..ㅎ 사실 이렇게 해도

<button className={`text-[${teamColor}] border-[${teamColor}]`}>
  {teamName}
</button>

에서 teamColor가 적용되지 않는 문제는 여전히 해결되지 않았다.. 이어지는 문제와 해결 과정에 대해서는 이어지는 포스트에 따로 기록해두겠다.

🧠 배우고 느낀 점

테일윈드가 제공하는 theme에 커스텀 theme을 추가할 때는 extend 객체 안에 넣어주자.