ant design과 tailwind css 충돌 이슈 해결

UI 라이브러리를 처음 사용해 보고 있다. 개발의 많은 부분이 트레이드 오프인데 UI 라이브러리 도입도 이러한 부분이 있는 것 같다. 

 

pros. 

- 직관적이고 깔끔한 UX 컴포넌트 지원

- 빠른 개발 속도

- 웹 접근성 준수 

 

cons.

- 커스터마이징의 한계 

- 이슈가 생기면 내가 코드를 잘못 작성한 탓인지 라이브러리 자체의 이슈인지 매번 찾아봐야함

 

antd 도입을 결정하고 난 후 매일 antd 레포의 이슈를 뒤지는 삶을 살고 있다 해도 과언이 아니다. 그 첫 시작은 tailwind와의 충돌이었다. tailwind가 설치된 프로젝트에 antd를 추가로 설치하고 버튼 컴포넌트를 불러왔더니 버튼이 보이지 않았다 😱

왼쪽 상단을 자세히 보면 버튼이 있음을 짐작할 수 있는 border shadow가 간신히 보임

 

개발자 도구를 보면 antd primary button의 배경색 #1677ff 가 tailwind의 button 태그 스타일에 지정된 배경색 transparent 때문에 적용되지 않고 있음을 확인할 수 있다. 

 

이에 대한 이슈 New ant design version 5.0.0 is confilicting with tailwindcss를 찾았다. 해결을 위한 1차 시도로 tailwind의 reset을 off하기 위해 tailwind config 설정을 다음과 같이 수정했다. 

 

// tailwind.config.js
export default {
	// 생략
	corePlugins: {
    preflight: false,
  },
};

 

그리고 tailwind 대신 antd reset을 불러왔다.

 

/* index.css */
@import 'antd/dist/reset.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

 

그러자 버튼의 배경색은 정상적으로 보였으나 border 등 일부 속성을 위한 추가 class name 작성이 필요해졌다. 

(참고 이슈: Borders not visible with disabled preflight)

 

또한 ant design의 css 커스터마이징을 위해서는 inline style로 style 객체를 작성해야 했는데 팀 내에서 근본적으로 좋은 방향이 아니라고 판단해 tailwind의 preflight: false 설정을 하지 않고도 antd 라이브러리를 쓸 수 있는 방법을 찾았다. 

 

그 다음으로 찾은 방법은 위의 이슈에도 나와있는 것처럼 StyleProvider를 통해 hashPriority="high" 설정을 해줘서 문제가 되는 :where wrapper를 제거해주는 것이었다. 

 

// main.tsx 또는 index.tsx
import { StyleProvider } from '@ant-design/cssinjs';

// Config `hashPriority` to `high` instead of default `low`
// Which will remove `:where` wrapper
export default () => (
  <StyleProvider hashPriority="high">
    <MyApp />
  </StyleProvider>
);

Ant Design 공식 문서에 따르면 구형 브라우저를 지원하기 방안이나 tailwind 등 일부 css 프레임워크와의 충돌 이슈에도 적용 가능하다. 이후에는 tailwind와 antd를 같이 사용할 수 있게 되었다. 

 

라이브러리를 도입할지 말지, 라이브러리를 도입한다면 어떤 라이브러리를 도입할지, 기존 개발환경과 충돌이나 호환성 이슈는 없는지를 찾아보고 결정하는 일련의 과정들이 어렵기만 하다. 경험치가 턱없이 부족하기에 어떤 기준점을 가지고 어떤 가설을 세우는 것 자체가 아직 그림이 그려지지 않기 때문이다. 좌충우돌 우당탕탕하는 이 시간들이 결코 헛되지 않을 거라고, 착실히 스탯을 올리고 있는 과정이라고 매일 주문을 왼다.