Tailwind CSS에서 동적 클래스 이름을 사용하는 방법은 무엇입니까?

동적 클래스 이름 및 Tailwind CSS

JavaScript에서 클래스 이름을 동적으로 구성하는 것은 일반적인 관행이지만 Tailwind CSS의 경우에는 도전을 제시합니다. Tailwind CSS는 소스 파일에서 끊어지지 않은 완전한 클래스 이름을 추출하는 데 의존합니다.

Tailwind의 문서에 따르면 문자열 보간 또는 연결을 사용하여 클래스 이름을 동적으로 구성하면 Tailwind가 클래스를 찾지 못하여 해당 CSS가 생성되지 않습니다. 예:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

이 예에서 text-red-600 및 text-green-600 문자열은 완전한 클래스 이름으로 존재하지 않으므로 Tailwind는 이를 무시합니다.

해결책:

이 문제를 해결하기 위한 몇 가지 방법이 있습니다. 솔루션:

• 완전한 클래스 이름 사용:
  사용하는 모든 클래스 이름이 완전한 형식으로 존재하는지 확인하세요.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• 변수에 클래스 이름 정의:
  클래스 이름 정의 직접 참조할 수 있는 변수에

const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
};

<p className={`${colors.secondary} text-text-white`}></p>

• 스타일 속성 활용:

<p className="text-text-white">

위 내용은 Tailwind CSS에서 동적 클래스 이름을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!