Tailwind css 동적 클래스 문제 해결

interface SkeletonProps {
  className?: string;
  spinnerSize?: number
}

export const Skeleton = ({ className, spinnerSize = 16 }: SkeletonProps) => {
  return (
  // 기존 코드
    <svg className={`mr-3 size-${spinnerSize} animate-spin `}
          viewBox="0 0 24 24"
        >
  );
};


interface SkeletonProps {
  className?: string;
  spinnerSize?: 4 | 8 | 12 | 16 | 20 | 24;
}

export const Skeleton = ({ className, spinnerSize = 16 }: SkeletonProps) => {
    const sizeClasses = {
        4: "size-4",
        8: "size-8",
        12: "size-12",
        16: "size-16",
        20: "size-20",
        24: "size-24",
      };
  return (
  // 개선 코드
    <svg className={`mr-3 size-${spinnerSize} animate-spin `}
          viewBox="0 0 24 24"
        >
  );
};

문제 배경

값을 집어 넣었는데 원하는 size의 원이 나오질 않았습니다

원인 파악

Tailwind는 빌드 시점에 실제 코드에서 사용된 클래스만 생성하기 때문에, 동적으로 생성된 클래스명은 인식하지 못합니다.

interface SkeletonProps {
  className?: string;
  spinnerSize?: 4 | 8 | 12 | 16 | 20 | 24; // 허용된 크기만 정의
}

export const Skeleton = ({ className, spinnerSize = 16 }: SkeletonProps) => {
  // 미리 정의된 매핑 객체 사용
  const sizeClasses = {
    4: 'size-4',
    8: 'size-8',
    12: 'size-12',
    16: 'size-16',
    20: 'size-20',
    24: 'size-24'
  };

  return (
    <div className={`w-full h-full flex items-center justify-center ${className}`}>
      <div className="flex items-center justify-center animate-pulse w-full h-full bg-gray-300">
        <svg
          className={`mr-3 ${sizeClasses[spinnerSize]} animate-spin`}
          viewBox="0 0 24 24"
        >
          {/* ... */}
        </svg>
      </div>
    </div>
  );
};

위와 같이 바꾸라는 답변을 받아 해결했습니다.

학습

Tailwind CSS의 빌드 프로세스 이해하기

Tailwind CSS의 작동 방식을 쉽게 설명해드리겠습니다.

1. Tailwind의 기본 동작

정적 클래스 사용 시

// 이렇게 직접 작성한 클래스는 빌드 시 인식됨
<div className="size-16">
  Hello
</div>

빌드 시 Tailwind는:

1. 코드를 스캔하여 "size-16"이라는 클래스를 찾음
2. 해당하는 CSS를 생성:
3. .size-16 { width: 4rem; height: 4rem; }

동적 클래스 사용 시

const size = 16;
// 이렇게 동적으로 생성된 클래스는 빌드 시 인식되지 않음
<div className={`size-${size}`}>
  Hello
</div>

빌드 시 Tailwind는:

1. size-${size}라는 문자열을 찾지만, 실제 어떤 클래스가 사용될지 알 수 없음
2. 따라서 size-16 클래스에 대한 CSS를 생성하지 않음
3. 결과적으로 런타임에 클래스가 존재하지 않게 됨

2. 실제 예시

// 작동하지 않는 예시
const spinnerSize = 16;
const className = `size-${spinnerSize}`; // "size-16"이라는 클래스가 빌드에 포함되지 않음

// 작동하는 예시
const className = "size-16"; // 이 클래스는 빌드 시점에 확실히 인식됨

3. 비유로 이해하기

이것은 마치 책의 색인과 비슷합니다:

• 책을 출판할 때 (= 빌드 시점) 색인을 만듭니다
• 색인에는 실제 책에 있는 단어들만 포함됩니다
• 나중에 누군가 동적으로 새로운 단어를 추가하려고 해도 (= 런타임), 이미 색인은 만들어져 있어서 찾을 수 없습니다

Tailwind CSS의 클래스와 빌드 크기 관계

클래스를 많이 정의하는 것이 성능에 미치는 영향을 설명해드리겠습니다.

영향을 주는 부분

1. 최종 CSS 파일 크기
   • 정의된 각 클래스는 최종 CSS 파일에 포함됨
   • 예를 들어:

     .size-4 { width: 1rem; height: 1rem; }
     .size-8 { width: 2rem; height: 2rem; }
     .size-12 { width: 3rem; height: 3rem; }
     /* ... */

   • 하지만 각 클래스는 매우 작은 크기 (대략 30-50바이트 정도)
2. 실제 영향
   • size-4부터 size-24까지 (6개 클래스)
   • 총 추가되는 크기: 약 200-300바이트 정도
   • 현대 웹사이트 기준으로는 매우 미미한 크기
   • 일반적인 이미지 한 장이 이보다 훨씬 큼

결론

// 이 정도 크기는 성능에 실질적인 영향을 주지 않습니다
const sizeClasses = {
  4: "size-4",
  8: "size-8",
  12: "size-12",
  16: "size-16",
  20: "size-20",
  24: "size-24"
};

실제로 신경 쓸 부분은:

• 수천 개의 불필요한 클래스를 정의하는 경우
• 동적으로 생성되는 무한한 범위의 클래스들
• 사용하지 않는 많은 유틸리티 클래스들

현재 사용 중인 6개 정도의 size 클래스는 전혀 문제되지 않습니다! 👍