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

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

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

Alternativ können Sie Folgendes verwenden Syntax:

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 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 ? 'red' : 'green'}-600`}>
</div>

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

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

oder:

<div className={error ? 'text-red-600' : 'text-green-600'}>
</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!