TailwindCss에서 클래스 이름을 동적으로 구성

Question

현재 다음 프로젝트를 위해 TailwindCss를 사용하여 구성 요소 라이브러리를 구축하고 있는데 방금 Button 구성 요소에 작은 문제가 발생했습니다.

tailwind.config에서 했던 것과 동일하게 작동하는 'primary' 또는 'secondary'와 같은 속성을 전달했습니다. js< ;/code> 다음과 같이 Template Lites를 사용하여 버튼 구성요소에 할당하고 싶습니다. bg-${color}-500

;

<버튼
    클래스명={`
    w-40 반올림-lg p-3 m-2 글꼴-굵게 전환-모든 기간-100 테두리-2 활성:스케일-[0.98]
    bg-${color}-500 `}
    onClick={온클릭}
    유형="버튼"
    탭인덱스={0}
  >
    {어린이들}
</버튼>

클래스 이름은 브라우저에 잘 표시되며 DOM에는 bg-primary-500이 표시되지만 적용된 스타일 탭에는 표시되지 않습니다.

테마 구성은 다음과 같습니다.

테마: {
    연장하다: {
      색상: {
        주요한: {
          500: '#B76B3F',
        },
        중고등 학년: {
          500: '#344055',
        },
      },
    },
  },

그러나 어떤 스타일도 적용되지 않습니다. 수동으로 bg-primary-500을 추가하면 제대로 작동합니다.

솔직히, 이것이 JIT 컴파일러가 동적 클래스 이름을 선택하지 않기 때문인지, 아니면 제가 뭔가 잘못하고 있는 것인지 궁금합니다(또는 이것이 tailWind를 사용하는 방법이 아닌지).

어떤 도움이라도 환영합니다. 미리 감사드립니다!

Answer 1

Tailwind CSS 클래스를 이런 방식으로 작성하는 것은 권장되지 않습니다. JIT 모드도 지원되지 않습니다 . Tailwind CSS 문서를 인용하면 다음과 같습니다. "Tailwind에는 어떤 종류의 클라이언트 런타임도 포함되지 않으므로 클래스 이름은 빌드 시 정적으로 추출되어야 하며 클라이언트에서는 이를 신뢰할 수 없습니다 "

Answer 2

그래서 이 작업 방식은 더 이상 사용되지 않으며 JIT가 이를 지원하지 않는다는 것을 알게 된 후입니다(관대한 댓글 작성자에게 감사드립니다). 저는 접근 방식을 보다 "구성" 기반 접근 방식으로 변경했습니다.

기본적으로 다양한 props의 기본 구성으로 const를 정의하고 이를 컴포넌트에 적용합니다. 이를 위해서는 더 많은 유지 관리가 필요하지만 작업이 완료됩니다.

구성 예시입니다. (지금은 입력이 필요하지 않음) 및 더 나은 리팩토링이 있지만 아이디어를 얻을 수 있습니다.

으아악

그런 다음 스타일을 다음과 같이 적용합니다.

으아악