tailwind css의 classname 순서 문제

tailwind를 사용해보니 편리하지만 직관적으로 이해하기 어려운 부분도 많다.

그 중 대표적인 것이 스타일이 classname에 적힌 순서대로 적용되지 않는 점이다.

아래 포스트가 좋은 예시를 들고 있다.

https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#tailwind-class%EC%9D%98-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

Tailwind CSS 사용기

위 포스트의 예시를 한 마디로 정리하면, 아래 코드는 text-blue 를 보장하지 않는다.

<div className="text-red-400 text-blue-400">Hello world</div>

tailwind는 classname은 순서는 고려하지 않기 때문이다.

 

이 문제를 해결하기 위해서는 별도의 라이브러리를 써야 한다. 일반적으로는 twin.macro를 제시한다.

문제는 twin.mcro가 styled components, emotion 등 css-in-js툴에 의존성을 가지고 있다는 점이다.

 

이런 문제 때문에 프로젝트 전체에 css-in-js 툴을 사용해야 하는지를 고민해야 한다.

뿐만 아니라 트렌드가 바뀌어서 오히려 css-in-js에 대해 부담을 느끼는 경우가 많아졌다. 

실제로 인기있는 react-select도 emotion에 대한 의존성을 일부 덜어내고 className 기반의 api를 함께 적용하기로 결정했다. 

https://github.com/JedWatson/react-select/issues/5451

New classNames API for Tailwind (and other CSS library) support · Issue #5451 · JedWatson/react-select

 

자신이 진행하는 프로젝트의 상황에 따라 다르지만 나는 css-in-js 툴을 사용하지 않는 상황이었다.

이런 상황에서 가장 좋은 선택지는 tailwind-merge였다.

 

tailwind-merge의 무엇을 위한 라이브러리인가? 의 글을 보면, 이 className순서 문제를 해결하기 위한 것임을 명확하게 한다.

용량도 작고 간편하다.

복잡한 설정은 필요없지만, tailwind.config.js에 설정을 해 두었으면 조금 설정이 필요하다.

 

 

가장 많이 나는 충돌은 text-*** 일 것이다.

tailwind는 font size랑 color모두 text-***를 사용한다.

그래서 tailwind.config.js에 커스텀 옵션이 있으면 text-10 하면 이게 사이즈인지 컬러인지 tailwind-merge가 인식을 못한다.

이건 tailwind-merge 뿐만 아니라 비슷한 라이브러리 다 필요하다.

 

config에 추가해주어야 한다. 

링크를 통해 알 수 있다.