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

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

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

Tailwind CSS 명명 규칙

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

해결책:

• 전체 클래스 이름 사용: 전체 클래스 정의 ThemeContext에 이름을 지정하고 단일 문자열로 존재하는지 확인하세요.

• 예:

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

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

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

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

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