TailwindCss에서 클래스 이름을 동적으로 구성
P粉147747637
2023-08-24 10:11:17
<p>현재 다음 프로젝트를 위해 TailwindCss를 사용하여 구성 요소 라이브러리를 구축하고 있는데 방금 Button 구성 요소에 작은 문제가 발생했습니다. </p>
<p><code>tailwind.config에서 했던 것과 동일하게 작동하는 <code>'primary'</code> 또는 <code>'secondary'</code>와 같은 속성을 전달했습니다. js< ;/code> 다음과 같이 <code>Template Lites</code>를 사용하여 버튼 구성요소에 할당하고 싶습니다. <code>bg-${color}-500</ code></p> ;
<pre class="brush:php;toolbar:false;"><버튼
클래스명={`
w-40 반올림-lg p-3 m-2 글꼴-굵게 전환-모든 기간-100 테두리-2 활성:스케일-[0.98]
bg-${color}-500 `}
onClick={온클릭}
유형="버튼"
탭인덱스={0}
>
{어린이들}
</버튼></pre>
<p>클래스 이름은 브라우저에 잘 표시되며 DOM에는 <code>bg-primary-500</code>이 표시되지만 적용된 스타일 탭에는 표시되지 않습니다. </p>
<p>테마 구성은 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">테마: {
연장하다: {
색상: {
주요한: {
500: '#B76B3F',
},
중고등 학년: {
500: '#344055',
},
},
},
},</pre>
<p>그러나 어떤 스타일도 적용되지 않습니다. 수동으로 <code>bg-primary-500</code>을 추가하면 제대로 작동합니다. </p>
<p>솔직히, 이것이 JIT 컴파일러가 동적 클래스 이름을 선택하지 않기 때문인지, 아니면 제가 뭔가 잘못하고 있는 것인지 궁금합니다(또는 이것이 tailWind를 사용하는 방법이 아닌지). </p>
<p>어떤 도움이라도 환영합니다. 미리 감사드립니다! </p>
Tailwind CSS 클래스를 이런 방식으로 작성하는 것은 권장되지 않습니다. JIT 모드도 지원되지 않습니다 . Tailwind CSS 문서를 인용하면 다음과 같습니다. "Tailwind에는 어떤 종류의 클라이언트 런타임도 포함되지 않으므로 클래스 이름은 빌드 시 정적으로 추출되어야 하며 클라이언트에서는 이를 신뢰할 수 없습니다 "
그래서 이 작업 방식은 더 이상 사용되지 않으며 JIT가 이를 지원하지 않는다는 것을 알게 된 후입니다(관대한 댓글 작성자에게 감사드립니다). 저는 접근 방식을 보다 "구성" 기반 접근 방식으로 변경했습니다.
기본적으로 다양한 props의 기본 구성으로 const를 정의하고 이를 컴포넌트에 적용합니다. 이를 위해서는 더 많은 유지 관리가 필요하지만 작업이 완료됩니다.
구성 예시입니다. (지금은 입력이 필요하지 않음) 및 더 나은 리팩토링이 있지만 아이디어를 얻을 수 있습니다.
으아악그런 다음 스타일을 다음과 같이 적용합니다.
으아악