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 nicht das 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 war die 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 erschienen nie in den CSS-Dateien.

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

Das folgende Beispiel wird funktionieren

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.