React, AntD 및 Tailwind: CSS 충돌 수정

React, Tailwind 및 Ant Design (아마도 시장에서 구할 수 있는 대부분의 다른 UIKIT)을 사용하는 경우 일부 CSS 충돌이 발생할 수 있습니다.

예를 들어 AntDModal 구성 요소는 바닥글에 기본적으로 "확인"및 "취소"버튼을 표시합니다.

 <Modal title="Add city" onOk={} onCancel={} />

아래 스크린샷에서 볼 수 있듯이 확인 버튼이 제대로 표시되지 않습니다(파란색이어야 함).

실제로 Tailwind는 투명한 배경색을 적용하는 반면 AntD는 파란색 배경을 적용해야 합니다.

이 문제를 해결하기 위해 브라우저 간 불일치를 완화하도록 설계된 기본 스타일 세트인 TailwindPreflight를 비활성화할 수 있습니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    // ...
  ],
  corePlugins: {
    preflight: false // <== disable this!
  },
}

그리고 문제는 마술처럼 해결됩니다.