Tailwind CSS에서 동적 클래스 조작을 위해 템플릿 리터럴을 올바르게 사용하는 방법은 무엇입니까?

템플릿 리터럴을 사용하여 Tailwind CSS에서 동적 클래스 조작을 활용하는 방법은 무엇입니까?

Tailwind CSS에서 조건부 클래스 할당을 사용하면 개발자가 특정 조건에 따라 클래스 이름을 동적으로 업데이트할 수 있습니다. 하지만 이 기능을 활용하려고 할 때 문제가 발생하는 것은 드문 일이 아닙니다.

이러한 경우에 사용자는 다음 코드를 사용하여 클래스를 변경하려고 했습니다.

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300"
>
</div>

그러나 이 코드 조각은 예상대로 작동하지 못했습니다. 이 시나리오에 대한 올바른 접근 방식은 다음과 같습니다.

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

또는 다음 구문을 사용할 수도 있습니다.

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

클래스 생성에 문자열 연결을 사용하지 않는 것이 중요합니다. 아래에 설명되어 있습니다.

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

대신 전체 수업을 선택하세요. 이름:

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

Tailwind는 프로덕션 빌드 중에 템플릿 내에 전체가 나타나는 클래스를 유지합니다.

또한 다음과 같은 추가 옵션을 마음대로 사용할 수 있습니다.

• 클래스 이름 또는 clsx와 같은 라이브러리 사용
• 다음과 같은 Tailwind 전용 솔루션 사용 Twin.macro, Twind 또는 xwind

위 내용은 Tailwind CSS에서 동적 클래스 조작을 위해 템플릿 리터럴을 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!