Wie verwaltet man Tailwind-CSS-Klassen dynamisch mit Vorlagenliteralen?

Dynamische Klassenänderungen in TailwindCSS mit Vorlagenliteralen

In TailwindCSS bieten Vorlagenliterale eine praktische Möglichkeit, Klassen basierend auf Status oder Requisiten dynamisch zu ändern . Bei falscher Verwendung können jedoch Syntaxfehler auftreten.

Ein häufiges Problem ist der Versuch, eine Klasse mit einer Stilregel dynamisch hinzuzufügen oder zu entfernen, wie zum Beispiel:

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 "></xicon>
</div>;

Um dieses Problem zu beheben, schließen Sie ein der Klassenname innerhalb von Backticks (`):

<div classname="{`absolute" inset-0 : transform z-400 h-screen w-1 bg-blue-300>
</div>

Alternativ können Sie Folgendes verwenden Syntax:

<div classname="{'absolute" inset-0 : transform z-400 h-screen w-1 bg-blue-300>
</div>

Vermeiden Sie die Verwendung von Zeichenfolgenverkettungen, da TailwindCSS möglicherweise nicht verwendete Klassen im Produktions-Build entfernt:

<div classname="{`text-${error" :>
</div>

Wählen Sie stattdessen den vollständigen Klassennamen aus:

<div classname="{`${error" :>
</div>

oder:

<div classname="{error" :>
</div>

Zusätzliche Optionen umfassen Klassennamen und twin.macro.

Hier sind einige hilfreiche Ressourcen:

• React.js wendet bedingt Klassennamen an
• Wie füge ich eine Klasse dynamisch zu manuellen Klassennamen hinzu?
• Korrekter Umgang mit bedingtem Styling in React
• Einbetten von Ausdrücken in JSX
• Vorlagenliterale – MDN
• Optimierung für die Produktion – Schreiben von löschbarem HTML – Rückenwind-CSS

Das obige ist der detaillierte Inhalt vonWie verwaltet man Tailwind-CSS-Klassen dynamisch mit Vorlagenliteralen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!