템플릿 리터럴을 사용하여 React에서 Tailwind CSS 클래스를 동적으로 적용하려면 어떻게 해야 합니까?

Tailwind CSS에서 템플릿 리터럴을 사용하여 동적 CSS 클래스 적용

Tailwind CSS에서 CSS 클래스를 동적으로 변경하려고 하면 어려움에 직면할 수 있습니다. 예를 들어 다음 코드를 활용하려고 하면

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>

// Alternatively (without template literals):
<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={`text-${error ? 'red' : 'green'}-600`}></div>

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

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

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind는 전체 클래스 이름이 포함된 경우 프로덕션 빌드에서 전체 클래스 이름을 제거하지 않습니다. template.

또한 클래스 이름 또는 clsx와 같은 라이브러리와 Twin.macro, Twind 및 xwind와 같은 Tailwind 전용 솔루션을 포함한 다양한 옵션에 액세스할 수 있습니다.

추가 자료

• [React.js 조건부 적용 클래스 이름](https://github.com/facebook/react/issues/2316)
• [수동 클래스 이름에 클래스를 동적으로 추가하는 방법은 무엇입니까?](https://stackoverflow.com/questions/37585255 /how-to-dynamically-add-a-class-to-manual-class-names)
• [조건부 스타일을 처리하는 올바른 방법 React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [JSX에 표현식 삽입](https:// Reactjs.org/docs/jsx-in-length.html#embedding-expressions-in-jsx)
• [템플릿 리터럴 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [프로덕션 최적화 - 제거 가능한 HTML 작성 - Tailwind CSS](https:// tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

위 내용은 템플릿 리터럴을 사용하여 React에서 Tailwind CSS 클래스를 동적으로 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!