React에서 Tailwind CSS 클래스 재정의 문제 해결

 React에서 Tailwind CSS 클래스 오버라이딩 문제 해결하기

Tailwind CSS는 빠르게 사용자 인터페이스를 구축할 수 있는 인기 있는 유틸리티 기반 CSS 프레임워크입니다. 그러나 React와 함께 Tailwind CSS를 사용할 때 클래스 오버라이딩과 관련된 일반적인 문제가 발생할 수 있습니다. 이 글에서는 이 문제를 탐구하고 해결하는 방법을 제시합니다.

 

❗️문제점

Tailwind CSS를 사용하여 사전에 스타일이 지정된 파란색 버튼을 렌더링하는 간단한 React 컴포넌트가 있다고 가정해 보겠습니다. 이 컴포넌트는 사용자가 버튼을 더 많이 커스터마이즈 하기 위해 추가적인 클래스를 추가할 수 있도록 합니다. 다음은 해당 컴포넌트의 예입니다.

 

function Button({ label, className, ...props }) {
  const classes = `
    border
    border-black
    bg-blue-600
    p-4
    rounded-lg
    text-white
    text-xl
    ${className ?? ""}
  `;
  return <button className={classes}>{label}</button>;
}

 

다음과 같이 Button 구성 요소를 사용할 수 있습니다.

<Button label="Hello" />

버튼은 기본 파란색 배경으로 완벽하게 렌더링됩니다. 그러나 버튼의 색상을 빨간색으로 변경하려고 하면 문제가 발생합니다.

 

<Button label="Hello" className="bg-red-600" />

놀랍게도 버튼은 빨간색으로 바뀌지 않고 여전히 파란색 배경을 유지합니다. 생성된 HTML을 검사하면 bg-red-600 클래스가 실제로 존재하지만 bg-blue-600 클래스를 재정의하지는 않습니다.

 

 

원인

이 문제는 브라우저가 CSS 규칙 우선순위를 계산하는 방식에 있습니다. class 속성 내의 공백으로 구분된 클래스 목록은 계층적인 목록으로 처리되지 않습니다. 대신, 해당 요소가 가지고 있는 클래스 집합을 나타내며 클래스의 순서는 적용되는 CSS 규칙에 영향을 주지 않습니다.

이 문제는 Tailwind CSS에 특정한 것은 아닙니다. 동일한 속성을 설정하는 어떤 CSS 클래스들 간에도 발생할 수 있습니다.

해결

일반적인 CSS

일반적인 CSS의 경우, CSS 규칙의 우선순위를 높이고 충돌하는 스타일을 오버라이딩하는 방법이 있습니다. 요소 선택자, 클래스 조합, ID를 사용하는 등의 기법을 사용하여 원하는 스타일이 충돌하는 스타일보다 우선순위를 가지도록 할 수 있습니다.

 

Tailwind CSS

Tailwind CSS는 다른 접근 방식을 취합니다. 스타일시트를 수정하지 않고 사용할 수 있는 유틸리티 클래스를 제공합니다. 이로 인해 사용자 정의 클래스가 나타날 수 있는 순서를 예측하기 어려워집니다.

이 문제를 해결하기 위해 특히 Tailwind CSS를 위해 설계된 tailwind-merge npm 패키지를 사용할 수 있습니다.

1. tailwind-merge 패키지를 설치합니다:

npm install tailwind-merge

 

 

2. twMerge 함수를 React 컴포넌트로 가져옵니다:

 

import { twMerge } from "tailwind-merge";

 

3. twMerge 함수를 사용하여 사용자 정의 클래스와 Tailwind CSS 클래스를 병합합니다

 

 

• twMerge 함수를 사용하여 사용자 정의 클래스와 Tailwind CSS 클래스를 병합합니다:

function Button({ label, className, ...props }) {
  const classes = twMerge(`
    border
    border-black
    bg-blue-600
    p-4
    rounded-lg
    text-white
    text-xl
    ${className ?? ""}
  `);
  return <button className={classes}>{label}</button>;
}

 

twMerge를 사용하면 충돌하는 클래스 중 마지막 클래스가 이전 클래스보다 우선순위를 가지도록 보장합니다.

이제 `Button` 컴포넌트를 `bg-red-600`과 같은 사용자 정의 클래스로 업데이트하면 이전 파란색 배경을 올바르게 오버라이딩합니다.

 

<Button label="Hello" className="bg-red-600" />

✅ 결론

React에서 Tailwind CSS를 사용하는 애플리케이션에서 기존 클래스를 오버라이딩하는 것은 일반적인 문제입니다. 하지만 tailwind-merge 패키지를 사용하면 이 문제를 해결할 수 있습니다.