Acest articol detaliază procedura completă pentru a crea o presetare în Tailwind.
Cum se creează o „Presetare” în Tailwind?
Vantul din coada “ Presetări ” sunt considerate obiectele de configurare obișnuite care specifică aceeași configurație ca cea specificată în fișierul de configurare „tailwind.config.js”. Fișierul „prestat” nu este creat implicit, dar poate fi creat urmând pașii de mai jos:
Pasul 1: Creați un fișier „Preset”.
Mai întâi, creați un „ preset.js ” în proiectul Tailwind și adăugați toate opțiunile de configurare dorite, cum ar fi extensii, suprascrieri de teme, adăugare de pluginuri și multe altele:
// Exemplu de presetare
modul. exporturi = {
temă : {
culorile : {
albastru : {
ușoară : „#85d7ff” ,
MOD IMPLICIT : „#1fb6ff” ,
întuneric : „#009 șa” ,
} ,
roz : {
ușoară : „#ff7ce5” ,
MOD IMPLICIT : „#ff49db” ,
întuneric : „#ff16d1” ,
} ,
gri : {
cel mai întunecat : „#1f2d3d” ,
întuneric : „#3c4858” ,
MOD IMPLICIT : „în #c0cc” ,
ușoară : „#e0e6ed” ,
cel mai usor : „#f9fafc” ,
}
} ,
familie de fonturi : {
fără : [ 'grafic' , „sans serif” ] ,
} ,
Presa ' Ctrl+S ” pentru a salva fișierul de mai sus.
Pasul 2: Editați fișierul „tailwind.config.js”.
Apoi, navigați la „ tailwind.config.js ” fișier de configurare, specificați numele căilor șablonului, precum și specificați „ preset.js ” fișier cu “ presetări ” cuvânt cheie:
modul. exporturi = {
conţinut : [
„./index.html” ,
„./src/**/*.{js,ts,jsx,tsx}” ,
] ,
presetări : [
( „preset.js” )
]
}
Presa ' Ctrl+S ” pentru a salva fișierul.
Pasul 3: Rulați aplicația
Acum, rulați „ proiect rapid ” în serverul de dezvoltare introducând următoarea comandă:
npm run dev 
În cele din urmă, faceți clic pe linkul „localhost” pentru a afișa rezultatul.
Ieșire
După cum s-a văzut, rezultatul returnează un proiect vite cu stilul „Tailwind CSS”.
Concluzie
În Tailwind, creați un „ presetat ” din proiect și specificați toate configurațiile „ tailwind.config.js ” fișier în el. După aceea, specificați fișierul „preset.js” în fișierul „tailwind.config.js” cu ajutorul cuvântului cheie „preset”. Fișierul „preset.js” nou creat va încorpora toate CSS-urile personalizate în șablonul specificat, la fel ca fișierul „tailwind.config.js”. Acest articol a demonstrat procedura completă pentru a crea o presetare în Tailwind.