Warum kann ich mit Tailwind CSS keine dynamischen Klassennamen verwenden?

Verstehen der Einschränkungen dynamischer Klassennamen in Tailwind CSS

Problem:

Beim Versuch, eine Kontextvariable als zu übergeben Wenn Sie einem Tailwind-CSS-Klassennamen einen Wert hinzufügen, schlägt der Vorgang fehl. Dieses Problem tritt auf, weil Tailwind dynamische Klassennamen nicht extrahieren kann.

Erklärung:

Tailwind CSS arbeitet nach dem Prinzip, Klassennamen als vollständige, ununterbrochene Zeichenfolgen zu identifizieren innerhalb der Codebasis. Wenn Klassennamen dynamisch erstellt oder verkettet werden, kann Tailwind sie nicht erkennen und generiert daher kein entsprechendes CSS. Dieses Verhalten wird in der offiziellen Dokumentation ausdrücklich beschrieben, die von der dynamischen Erstellung von Klassennamen abrät.

Lösung:

Um dieser Herausforderung zu begegnen, stellen Sie sicher, dass die Klassennamen verwendet werden vollständig sind und nicht aus dynamischen Teilen bestehen. Erwägen Sie die Definition vollständiger Klassennamen in Ihrem Kontext, wie zum Beispiel im folgenden Beispiel:

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

Alternativ können Sie erwägen, das Stilattribut zu verwenden, um dynamische Werte zuzuweisen:

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

Durch Einhaltung Wenn Sie diese Richtlinien befolgen, wird Tailwind CSS die gewünschten CSS-Regeln genau identifizieren und generieren.

Das obige ist der detaillierte Inhalt vonWarum kann ich mit Tailwind CSS keine dynamischen Klassennamen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!