Wie verwende ich Kontextvariablen mit Tailwind-CSS-Klassennamen?

Dynamische Klassennamen mit Tailwind CSS

Bei der Verwendung von Kontextvariablen in React ist es üblich, diese Werte als Klassennamen an Tailwind zu übergeben CSS. Dieser Ansatz kann jedoch auf Einschränkungen stoßen.

Tailwind CSS-Namenskonventionen

Laut Tailwind CSS-Dokumentation werden nur vollständige, ununterbrochene Zeichenfolgen als gültige Klassennamen interpretiert. Durch Interpolation oder Verkettung erstellte dynamische Klassennamen werden nicht erkannt.

Lösung:

• Vollständige Klassennamen verwenden: Vollständige Klasse definieren Namen in Ihrem ThemeContext und stellen Sie sicher, dass sie als einzelne Zeichenfolge vorhanden sind.

• Beispiel:

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

• Inline verwenden Stilattribut:

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

  Durch die Einhaltung dieser Lösungen können Sie Kontextvariablen effektiv in Ihre Tailwind-CSS-Klassennamen integrieren.

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