Tailwind CSS에서 동적 클래스 이름을 사용할 수 없는 이유는 무엇입니까?

Tailwind CSS에서 동적 클래스 이름을 사용할 수 없는 이유

Tailwind CSS에서 클래스 이름은 소스 코드에서 끊어지지 않은 완전한 문자열로 추출됩니다. 즉, 문자열 보간 또는 연결을 사용하여 클래스 이름을 동적으로 구성하려고 하면 Tailwind가 이를 인식하지 못하고 해당 CSS를 생성하지 않습니다.

예

예를 들어 다음을 고려하세요. 코드 조각:

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

이 예에서 className 속성은 colors.secondary 변수와 문자열 text-text-white를 결합하는 템플릿 리터럴로 설정됩니다. Tailwind는 bg-[${colors.secondary}] 클래스 이름을 인식하지 못하고 해당 CSS를 생성하지 않습니다.

해결책

이 문제를 해결하는 방법에는 두 가지가 있습니다.

1. 다음과 같이 정의에 전체 클래스 이름을 사용하세요.

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

2. 스타일 속성을 사용하여 배경색을 동적으로 설정하세요.

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

이 지침을 따르면 Tailwind CSS 클래스 이름이 올바르게 생성되고 스타일이 예상대로 적용되는지 확인할 수 있습니다.

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