In diesem Artikel wird das vollständige Verfahren zum Erstellen einer Voreinstellung in Tailwind erläutert.
Wie erstelle ich eine „Voreinstellung“ in Tailwind?
Rückenwind ' Voreinstellungen gelten als reguläre Konfigurationsobjekte, die dieselbe Konfiguration angeben wie in der Konfigurationsdatei „tailwind.config.js“. Die „Preset“-Datei wird nicht standardmäßig erstellt, kann jedoch durch Befolgen der unten angegebenen Schritte erstellt werden:
Schritt 1: Erstellen Sie eine „Preset“-Datei
Erstellen Sie zunächst ein „ Preset.js ”-Datei im Tailwind-Projekt und fügen Sie alle gewünschten Konfigurationsoptionen wie Erweiterungen, Theme-Überschreibungen, Hinzufügen von Plugins und vieles mehr hinzu:
// Beispielvoreinstellung
Modul. Exporte = {
Thema : {
Farben : {
Blau : {
Licht : '#85d7ff' ,
STANDARD : '#1fb6ff' ,
dunkel : '#009 Sattel' ,
} ,
Rosa : {
Licht : '#ff7ce5' ,
STANDARD : '#ff49db' ,
dunkel : '#ff16d1' ,
} ,
grau : {
am dunkelsten : '#1f2d3d' ,
dunkel : '#3c4858' ,
STANDARD : 'in #c0cc' ,
Licht : '#e0e6ed' ,
am leichtesten : '#f9fafc' ,
}
} ,
Schriftfamilie : {
ohne : [ 'Graphik' , 'serifenlos' ] ,
} ,
Drücken Sie ' Strg+S ”, um die obige Datei zu speichern.
Schritt 2: Bearbeiten Sie die Datei „tailwind.config.js“.
Navigieren Sie als Nächstes zu „ tailwind.config.js Geben Sie in der Konfigurationsdatei den Namen der Vorlagenpfade sowie „ Preset.js ” Datei mit dem „ Voreinstellungen ' Stichwort:
Modul. Exporte = {
Inhalt : [
„./index.html“ ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
Voreinstellungen : [
( 'preset.js' )
]
}
Drücken Sie ' Strg+S ”, um die Datei zu speichern.
Schritt 3: Führen Sie die Anwendung aus
Führen Sie nun das vorhandene „ Schnellprojekt ” im Entwicklungsserver durch Eingabe des folgenden Befehls:
npm run dev 
Klicken Sie abschließend auf den Link „localhost“, um die Ausgabe anzuzeigen.
Ausgang
Wie Sie sehen, gibt die Ausgabe ein Vite-Projekt mit dem Stil „Tailwind CSS“ zurück.
Abschluss
Erstellen Sie in Tailwind ein „ voreingestellt ”-Datei im Projekt und geben Sie alle Konfigurationen der „ tailwind.config.js ”-Datei darin. Geben Sie anschließend mit Hilfe des Schlüsselworts „preset“ die Datei „preset.js“ in der Datei „tailwind.config.js“ an. Die neu erstellte Datei „preset.js“ bettet das gesamte benutzerdefinierte CSS in die angegebene Vorlage ein, genau wie die Datei „tailwind.config.js“. In diesem Artikel wurde das vollständige Verfahren zum Erstellen einer Voreinstellung in Tailwind beschrieben.