Wie verwende ich Vorlagenliterale korrekt für die dynamische Klassenänderung in Tailwind CSS?

Verwenden von Vorlagenliteralen für die dynamische Klassenänderung in TailwindCSS

Beim Versuch, Klassen mithilfe des folgenden Codes dynamisch zu ändern:

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

kann es zu Problemen kommen ein Problem. Der richtige Weg, dies mithilfe von Vorlagenliteralen zu erreichen, ist:

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

Alternativ können Sie die Zeichenfolgenverkettung verwenden, um Ihren Klassennamen zu definieren:

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

Es ist wichtig, die Zeichenfolgenverkettung für einzelne Klassen zu vermeiden Namen, z. B.:

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

Wählen Sie stattdessen vollständige Klassennamen als aus folgt:

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

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

Tailwind behält vollständige Klassennamen in Produktions-Builds bei.

Erwägen Sie die Verwendung von Bibliotheken wie Klassennamen, CLSX oder Tailwind-spezifischen Lösungen wie Twin.macro, Twind, oder xwind für mehr Flexibilität.

Zusätzlich Ressourcen:

• [React.js bedingtes Anwenden von Klassennamen](https://reactjs.org/docs/dom-elements.html#conditional-class-names-and-styles)
• [So fügen Sie einer manuellen Klasse dynamisch eine Klasse hinzu Namen?](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [Korrekter Umgang mit bedingtem Styling in Reagieren](https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)
• [Ausdrücke einbetten in JSX](https://reactjs.org/docs/jsx-in- Depth.html#embedding-expressions-in-jsx)
• [Vorlagenliterale – MDN](https://developer.mozilla. org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimierung für die Produktion – Löschen von löschbarem HTML - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-produktion#writing-purgeable-html)

Das obige ist der detaillierte Inhalt vonWie verwende ich Vorlagenliterale korrekt für die dynamische Klassenänderung in Tailwind CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!