Wie kann ich Tailwind-CSS-Klassen in React mithilfe von Vorlagenliteralen dynamisch anwenden?

Anwenden dynamischer CSS-Klassen mit Vorlagenliteralen in Tailwind CSS

Beim Versuch, CSS-Klassen in Tailwind CSS dynamisch zu ändern, können Schwierigkeiten auftreten. Wenn Sie beispielsweise versuchen, den folgenden Code zu verwenden:

Dieser Code wird nicht effektiv ausgeführt. Um dieses Problem zu lösen, nehmen Sie die folgenden Änderungen vor:

Vermeiden Sie unbedingt die Verwendung von Zeichenfolgenverkettungen beim Erstellen von Klassennamen, wie im Folgenden gezeigt:

Entscheiden Sie sich stattdessen für die Auswahl vollständige Klassennamen:

Tailwind wird davon absehen, vollständige Klassennamen aus Produktions-Builds zu entfernen, wenn diese in Ihrem enthalten sind Vorlage.

Darüber hinaus haben Sie Zugriff auf verschiedene Optionen, darunter Bibliotheken wie Klassennamen oder CLSX und Tailwind-spezifische Lösungen wie Twin.macro, Twind und xwind.

Weiterführende Literatur

• [React.js bedingte Anwendung der Klasse Namen](https://github.com/facebook/react/issues/2316)
• [Wie füge ich eine Klasse dynamisch zu manuellen Klassennamen hinzu?](https://stackoverflow.com/questions/37585255 /how-to-dynamically-add-a-class-to-manual-class-names)
• [Korrekter Umgang mit bedingtem Stil in Reagieren](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [Ausdrücke in JSX einbetten](https:// reagierenjs.org/docs/jsx-in- Depth.html#embedding-expressions-in-jsx)
• [Vorlage Literale – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimierung für die Produktion – Schreiben von löschbarem HTML – Tailwind CSS](https: //tailwindcss.com/docs/optimizing-for-produktion#writing-purgeable-html)

Das obige ist der detaillierte Inhalt vonWie kann ich Tailwind-CSS-Klassen in React mithilfe von Vorlagenliteralen dynamisch anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!