Vue Tailwind und dynamische Klassen

Ein Projekt, an dem ich kürzlich gearbeitet habe, nutzt Vite, Vue und Tailwind.

Nachdem ich einige Zeit mit benutzerdefinierten Farben gearbeitet hatte, war ich etwas verwirrt.

Das Hinzufügen und Verwenden der benutzerdefinierten Farben in einer Vorlage war kein Problem – der Vorgang wird mithilfe der Tailwind-Dokumentation sehr deutlich gemacht

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

Mein Problem bestand bei der Verwendung der benutzerdefinierten Farben mit dynamischen und statischen CSS-Klassen in der Vue-Vorlage.

Wenn Sie das Projekt mit npm ausführen, führen Sie dev oder vite aus. bg-custom-green-50 oder text-custom-green-50 funktionierten nicht und wurden nie in den CSS-Dateien angezeigt.

Nach meinem Verständnis wird Tailwind ihn nicht hinzufügen oder in der CSS-Datei generieren, wenn Ihr vollständiger CSS-Klassenname nicht in der Vorlage vorhanden ist.

Angenommen, die CSS-Klassen: text-custom-green-50 oder bg-custom-green-50 werden nirgendwo anders im Projekt verwendet

Das folgende Beispiel wird nicht funktionieren

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

Das folgende Beispiel wird funktionieren

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
    <p class="text-custom-green">Green text</p>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

Der Unterschied zwischen den beiden Beispielen besteht darin, dass die CSS-Klasse text-custom-green zur Vorlage hinzugefügt wird, sodass Tailwind sie zur generierten CSS-Datei hinzufügt.

Um dies zu umgehen, können Sie beliebige benutzerdefinierte Farben oder Tailwind-Klassen zu einer Safelist in Ihrer tailwind.config.js-Datei hinzufügen.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

Diese Farben sind auch dann verfügbar, wenn sie nicht direkt in einer Vorlage verwendet, sondern an anderer Stelle dynamisch hinzugefügt werden

Hoffentlich findet das jemand anderes hilfreich.

Das obige ist der detaillierte Inhalt vonVue Tailwind und dynamische Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!