Tailwind CSS에서 동적 클래스 수정을 위해 템플릿 리터럴을 올바르게 사용하는 방법은 무엇입니까?

TailwindCSS에서 동적 클래스 수정을 위해 템플릿 리터럴 사용

다음 코드를 사용하여 클래스를 동적으로 변경하려고 하면

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

다음과 같은 문제가 발생할 수 있습니다. 문제. 템플릿 리터럴을 사용하여 이를 달성하는 올바른 방법은 다음과 같습니다.

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

또는 문자열 연결을 사용하여 className을 정의할 수 있습니다.

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

개별 클래스에 대해 문자열 연결을 피하는 것이 중요합니다. 이름(예:

className={`text-${error ? 'red' : 'green'}-600`}

대신 다음과 같이 전체 클래스 이름을 선택하세요.) 다음은 다음과 같습니다.

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={error ? 'text-red-600' : 'text-green-600'}

Tailwind는 프로덕션 빌드에서 전체 클래스 이름을 보존합니다.

클래스 이름, clsx와 같은 라이브러리 또는 Twin.macro, Twind와 같은 Tailwind 관련 솔루션 활용을 고려하세요. 또는 유연성을 더 높이려면 xwind를 사용하세요.

추가 리소스:

• [React.js 조건부로 클래스 이름 적용](https://reactjs.org/docs/dom-elements.html#conditional-class-names-and-styles)
• [수동 클래스에 클래스를 동적으로 추가하는 방법 이름?](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [조건부 스타일 지정을 처리하는 올바른 방법 React](https://stackoverflow.com/questions/40787489/corright-way-to-handle-conditional-styling-in-react)
• [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)

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