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

Tailwind CSS의 동적 클래스 이름 제한 이해

문제:

컨텍스트 변수를 다음과 같이 전달하려고 할 때 Tailwind CSS 클래스 이름에 값을 추가하면 작업이 실패합니다. 이 문제는 Tailwind가 동적 클래스 이름을 추출할 수 없기 때문에 발생합니다.

설명:

Tailwind CSS는 클래스 이름을 끊어지지 않는 완전한 문자열로 식별하는 원칙에 따라 작동합니다. 코드베이스 내에서. 클래스 이름이 동적으로 생성되거나 연결되면 Tailwind에서 이를 인식할 수 없으므로 결과적으로 해당 CSS를 생성하지 못합니다. 이 동작은 공식 문서에 명시적으로 설명되어 있으며 클래스 이름을 동적으로 구성하는 것을 권장하지 않습니다.

해결책:

이 문제를 해결하려면 클래스 이름이 사용되는지 확인하세요. 완전하며 동적 부분으로 구성되지 않습니다. 다음 예와 같이 상황에 맞게 완전한 클래스 이름을 정의하는 것을 고려해 보십시오.

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

또는 스타일 속성을 사용하여 동적 값을 할당하는 것을 고려할 수도 있습니다.

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

다음을 준수합니다. 이 지침에 따라 Tailwind CSS는 원하는 CSS 규칙을 정확하게 식별하고 생성합니다.

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