Heim >Web-Frontend >js-Tutorial >Wie verwende ich Kontextvariablen mit Tailwind-CSS-Klassennamen?

Wie verwende ich Kontextvariablen mit Tailwind-CSS-Klassennamen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-14 16:27:02944Durchsuche

How to Use Context Variables with Tailwind CSS Class Names?

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 existieren Zeichenfolge.
  • Beispiel:

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

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

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn