W tym artykule opisano pełną procedurę tworzenia ustawienia wstępnego w Tailwind.
Jak utworzyć „ustawienie wstępne” w Tailwind?
Wiatr w plecy „ Presety ” są uważane za zwykłe obiekty konfiguracyjne, które określają tę samą konfigurację, co określona w pliku konfiguracyjnym „tailwind.config.js”. Plik „preset” nie jest domyślnie tworzony, ale można go utworzyć, wykonując poniższe czynności:
Krok 1: Utwórz plik „Preset”.
Najpierw utwórz „ preset.js ” w projekcie Tailwind i dodaj wszystkie pożądane opcje konfiguracji, takie jak rozszerzenia, zastąpienia motywu, dodawanie wtyczek i wiele więcej:
// Przykładowe ustawienie wstępne
moduł. eksport = {
temat : {
zabarwienie : {
niebieski : {
światło : „#85d7ff” ,
DOMYŚLNY : „#1fb6ff” ,
ciemny : „#009 siodło” ,
} ,
różowy : {
światło : '#ff7ce5' ,
DOMYŚLNY : „#ff49db” ,
ciemny : '#ff16d1' ,
} ,
szary : {
najciemniejszy : „#1f2d3d” ,
ciemny : „#3c4858” ,
DOMYŚLNY : „w #c0cc” ,
światło : '#e0e6ed' ,
lżejszy : „#f9fafc” ,
}
} ,
rodzina czcionek : {
bez : [ 'graficzny' , „bezszeryfowy” ] ,
} ,
Naciskać ' Ctrl+S ”, aby zapisać powyższy plik.
Krok 2: Edytuj plik „tailwind.config.js”.
Następnie przejdź do „ tailwind.config.js ”, określ nazwę ścieżek szablonu, a także określ „ preset.js ” plik z „ presety słowo kluczowe:
moduł. eksport = {
treść : [
'./indeks.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
presety : [
( „preset.js” )
]
}
Naciskać ' Ctrl+S ”, aby zapisać plik.
Krok 3: Uruchom aplikację
Teraz uruchom istniejące „ szybki projekt ” na serwerze programistycznym, wprowadzając następującą komendę:
npm uruchom dev 
Na koniec kliknij łącze „localhost”, aby wyświetlić dane wyjściowe.
Wyjście
Jak widać, dane wyjściowe zwracają projekt vite ze stylem „Tailwind CSS”.
Wniosek
W Tailwind utwórz „ ustawione ” w projekcie i określ wszystkie konfiguracje pliku „ tailwind.config.js ” w nim. Następnie określ plik „preset.js” w pliku „tailwind.config.js” za pomocą słowa kluczowego „preset”. Nowo utworzony plik „preset.js” osadzi cały niestandardowy CSS w określonym szablonie, tak samo jak plik „tailwind.config.js”. W tym artykule pokazano pełną procedurę tworzenia ustawienia wstępnego w Tailwind.