템플릿 리터럴을 사용하여 Tailwind CSS 클래스를 동적으로 관리하는 방법은 무엇입니까?

템플릿 리터럴을 사용하는 TailwindCSS의 동적 클래스 변경

TailwindCSS에서 템플릿 리터럴은 상태 또는 소품에 따라 클래스를 동적으로 변경하는 편리한 방법을 제공합니다. . 그러나 잘못 사용하면 구문 오류가 발생할 수 있습니다.

한 가지 일반적인 문제는 다음과 같은 스타일 규칙을 사용하여 클래스를 동적으로 추가하거나 제거하려고 시도하는 것입니다.

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

이 문제를 해결하려면 다음을 포함하십시오. 백틱(`) 안의 클래스 이름:

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}>
</div>

또는 다음을 사용할 수 있습니다. 구문:

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}>
</div>

TailwindCSS가 프로덕션 빌드에서 사용하지 않는 클래스를 제거할 수 있으므로 문자열 연결을 사용하지 마세요.

<div className={`text-${error ? 'red' : 'green'}-600`}>
</div>

대신 전체 클래스 이름을 선택하세요.

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}>
</div>

또는:

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

추가 옵션에는 수업 이름과 Twin.macro.

다음은 유용한 리소스입니다:

• React.js가 조건부로 클래스 이름 적용
• 수동 클래스 이름에 클래스를 동적으로 추가하는 방법은 무엇입니까?
• React에서 조건부 스타일을 처리하는 올바른 방법
• React에 표현식 삽입 JSX
• 템플릿 리터럴 - MDN
• 프로덕션 최적화 - 제거 가능한 HTML 작성 - Tailwind CSS

위 내용은 템플릿 리터럴을 사용하여 Tailwind CSS 클래스를 동적으로 관리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!