Tailwind CSS 클래스 이름과 함께 컨텍스트 변수를 사용하는 방법은 무엇입니까?

Tailwind CSS를 사용한 동적 클래스 이름

React에서 컨텍스트 변수를 활용할 때 이러한 값을 Tailwind에 클래스 이름으로 전달하는 것이 일반적입니다. CSS. 그러나 이 접근 방식에는 제한이 있을 수 있습니다.

Tailwind CSS 명명 규칙

Tailwind CSS 문서에 따르면 끊어지지 않은 완전한 문자열만 유효한 클래스 이름으로 해석합니다. 보간 또는 연결을 통해 생성된 동적 클래스 이름은 인식되지 않습니다.

해결책:

• 전체 클래스 이름 사용: 전체 클래스 정의 ThemeContext에 이름을 지정하여 단일로 존재하는지 확인합니다. string.

• 예:

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

• 인라인 스타일 속성 사용:

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

  이러한 솔루션을 준수하면 컨텍스트 변수를 효과적으로 통합할 수 있습니다. Tailwind CSS 클래스 이름에 추가하세요.

위 내용은 Tailwind CSS 클래스 이름과 함께 컨텍스트 변수를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!