Tailwind CSS에서 동적으로 클래스 할당하기

Tailwind CSS는 빠른 프로토타이핑과 효율적인 CSS 파일 크기 최적화 덕분에 디자인 시스템을 구축할 때 매우 유용한 도구입니다.

그 덕분에 회사에서 디자인 시스템을 만들 때 Tailwind를 적극적으로 활용하며, 일관된 디자인과 빠른 개발 속도를 실현할 수 있었습니다.

 

그러나 진행 과정에서 예상치 못한 문제에 직면하게 되었습니다.

바로 '동적으로 변하는 데이터에 Tailwind CSS 클래스를 동적으로 할당하는 과정'에서 발생한 문제입니다.

 

문제 발생: 동적으로 Tailwind CSS 클래스 적용

Tailwind CSS는 기본적으로 유틸리티 클래스 기반의 시스템입니다. 클래스를 미리 정의하고, 이를 HTML 요소에 적용하는 방식이죠. 하지만 동적으로 변하는 데이터에 따라 스타일을 변경해야 할 때는 문제가 발생합니다. 예를 들어, 사용자 입력이나 API로 받은 데이터를 기반으로 클래스를 동적으로 할당해야 하는 경우입니다.

 

예시: 동적으로 카드 컴포넌트 스타일 변경하기

우리 팀은 Card라는 컴포넌트를 만들고, 각 카드의 스타일을 동적으로 변경해야 했습니다. 예를 들어, status 값에 따라 카드의 색상이 바뀌도록 하려고 했습니다. 상태가 "active"일 경우에는 초록색 배경, "inactive"일 경우에는 회색 배경을 적용하려 했습니다.

 

interface CardProps {
  status: string;
}

const Card: React.FC<CardProps> = ({ status }) => {
  return (
    <div className={`p-4 rounded-lg ${status === 'active' ? 'bg-green-500' : 'bg-gray-300'}`}>
      {/* 카드 내용 */}
    </div>
  );
};

 

이 코드에서는 status가 "active"일 때 bg-green-500 클래스를 적용하고, 그렇지 않으면 bg-gray-300 클래스를 적용하려고 했습니다. 방식은 간단하지만, 동적으로 생성되는 클래스 스타일이 적용되지 않는 문제를 일으켰습니다.

 

문제의 원인: Tailwind CSS의 Purge 기능

Tailwind CSS는 Purge라는 기능을 사용해, 프로젝트에서 실제로 사용되는 CSS만을 빌드 파일에 포함시킵니다. 이 기능은 파일 크기를 최적화하는 데 큰 도움이 되지만, 동적으로 생성된 클래스들은 인식하지 못하고 제거되는 경우가 많습니다. 예를 들어, 위의 코드에서 status 값이 "active"일 때만 bg-green-500 클래스가 적용되는데, Tailwind은 bg-green-500 클래스를 미리 HTML에서 확인할 수 없기 때문에 빌드 파일에 포함하지 않습니다.

 

해결 방법: Safelisting

이 문제를 해결하기 위해서는 safelisting 기능을 활용해야 합니다. Safelisting은 Purge 기능에서 제외할 클래스를 지정하는 방법으로, 동적으로 생성될 클래스를 명시적으로 포함시켜 줍니다.

 

safelist 설정 방법

Tailwind의 tailwind.config.js 파일에서 safelist 옵션을 추가하여 동적으로 생성되는 클래스를 명시적으로 포함시킬 수 있습니다. 예를 들어, bg-green-500과 bg-gray-300 클래스를 safelist에 추가하면, 해당 클래스들이 빌드 과정에서 제거되지 않고 항상 포함됩니다.

 

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  safelist: [
    'bg-green-500', // 옵션 추가
    'bg-gray-300', // 옵션 추가
  ],
}

 

이렇게 safelist에 클래스를 추가하면, Tailwind은 해당 클래스를 빌드 과정에서 제거하지 않으므로 동적 클래스 적용이 정상적으로 이루어집니다.

 

<Card status="active" />  {/* bg-green-500 적용 */}
<Card status="inactive" />  {/* bg-gray-300 적용 */}

 

 

결론

Tailwind CSS는 매우 강력한 도구이지만, 동적 데이터를 다룰 때는 몇 가지 주의해야 할 점이 있습니다. 특히 Purge 기능이 활성화된 상태에서 동적으로 생성된 클래스들이 최종 CSS 파일에 포함되지 않는 문제를 해결하려면 safelisting을 활용하는 것이 중요합니다.

이 방법을 통해 동적으로 변하는 데이터에 맞춰 스타일을 적용할 수 있었고, Tailwind CSS의 강력한 성능을 그대로 활용하면서도 디자인 시스템을 유지할 수 있었습니다.

 

 

 

 

끝

 

 

 

 

 

참고 자료

• Tailwind CSS 공식 문서 - Safelisting Classes
• Stack Overflow: Dynamically build classnames in TailwindCSS
• Reddit: Next.js and Tailwind can't use template string for applying classes