Warum kann ich in Tailwind CSS keine dynamischen Klassennamen verwenden?

Warum dynamische Klassennamen nicht in Tailwind CSS verwendet werden können

In Tailwind CSS werden Klassennamen als vollständige, ununterbrochene Zeichenfolgen aus Ihrem Quellcode extrahiert. Das heißt, wenn Sie versuchen, Klassennamen dynamisch mithilfe von String-Interpolation oder -Verkettung zu erstellen, erkennt Tailwind diese nicht und generiert kein entsprechendes CSS.

Beispiel

Betrachten Sie als Beispiel Folgendes Codeausschnitt:

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

In diesem Beispiel wird die Eigenschaft „className“ auf ein Vorlagenliteral festgelegt, das die Variable „colors.secondary“ mit der Zeichenfolge „text-text-white“ kombiniert. Tailwind erkennt den Klassennamen bg-[${colors.secondary}] nicht und generiert nicht das entsprechende CSS.

Lösung

Es gibt zwei Möglichkeiten, dieses Problem zu umgehen:

1. Verwenden Sie vollständige Klassennamen in Ihren Definitionen, wie:

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

2. Verwenden Sie das Stilattribut, um die Hintergrundfarbe dynamisch festzulegen, wie:

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

Indem Sie diese Richtlinien befolgen, können Sie sicherstellen, dass die Namen Ihrer Tailwind-CSS-Klassen korrekt generiert werden und dass Ihre Stile wie erwartet angewendet werden.

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