Wie verwende ich dynamische Klassennamen mit Tailwind CSS?

Dynamische Klassennamen und Tailwind CSS

Das dynamische Erstellen von Klassennamen in JavaScript ist eine gängige Praxis, aber wenn es um Tailwind CSS geht, ist es das stellt eine Herausforderung dar. Tailwind CSS basiert auf dem Extrahieren vollständiger, ununterbrochener Klassennamen aus Ihren Quelldateien.

Laut der Dokumentation von Tailwind führt die dynamische Konstruktion von Klassennamen mithilfe von String-Interpolation oder -Verkettung dazu, dass Tailwind die Klassen nicht findet und daher nicht das entsprechende CSS generiert. Zum Beispiel:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In diesem Beispiel existieren die Zeichenfolgen text-red-600 und text-green-600 nicht als vollständige Klassennamen, daher ignoriert Tailwind sie.

Lösungen:

Um dieses Problem zu beheben, gibt es mehrere Lösungen:

• Verwenden Sie vollständige Klassennamen:
  Stellen Sie sicher, dass alle von Ihnen verwendeten Klassennamen in ihrer vollständigen Form vorhanden sind.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• Klassennamen in Variablen definieren:
  Definieren Sie die Klassennamen in Variablen, die direkt sein können referenziert.

const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
};

<p className={`${colors.secondary} text-text-white`}></p>

• Verwenden Sie das Stilattribut:

<p className="text-text-white">

Das obige ist der detaillierte Inhalt vonWie verwende ich dynamische Klassennamen mit Tailwind CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!