Ang artikulong ito ay nagpapaliwanag sa kumpletong pamamaraan upang lumikha ng isang preset sa Tailwind.
Paano Gumawa ng 'Preset' sa Tailwind?
Tailwind ' Preset ” ay itinuturing na mga regular na configuration object na tumutukoy sa parehong configuration tulad ng tinukoy sa “tailwind.config.js” configuration file. Ang 'preset' na file ay hindi nilikha bilang default gayunpaman maaari itong gawin sa pamamagitan ng pagsunod sa mga hakbang na ibinigay sa ibaba:
Hakbang 1: Gumawa ng 'Preset' na File
Una, lumikha ng ' preset.js ” file sa proyekto ng Tailwind at idagdag ang lahat ng gustong opsyon sa pagsasaayos gaya ng mga extension, override ng tema, pagdaragdag ng mga plugin, at marami pa:
// Halimbawang preset
modyul. pag-export = {
tema : {
mga kulay : {
asul : {
liwanag : '#85d7ff' ,
DEFAULT : '#1fb6ff' ,
madilim : '#009 saddle' ,
} ,
kulay rosas : {
liwanag : '#ff7ce5' ,
DEFAULT : '#ff49db' ,
madilim : '#ff16d1' ,
} ,
kulay-abo : {
pinakamadilim : '#1f2d3d' ,
madilim : '#3c4858' ,
DEFAULT : 'sa #c0cc' ,
liwanag : '#e0e6ed' ,
pinakamagaan : '#f9fafc' ,
}
} ,
fontFamily : {
wala : [ 'graphic' , 'sans serif' ] ,
} ,
Pindutin ang ' Ctrl+S ” para i-save ang file sa itaas.
Hakbang 2: I-edit ang “tailwind.config.js” File
Susunod, mag-navigate sa ' tailwind.config.js ” configuration file, tukuyin ang pangalan ng template path at tukuyin ang “ preset.js ” file na may “ mga preset ” keyword:
modyul. pag-export = {
nilalaman : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
mga preset : [
( 'preset.js' )
]
}
Pindutin ang ' Ctrl+S ” para i-save ang file.
Hakbang 3: Patakbuhin ang Application
Ngayon, patakbuhin ang umiiral na ' mabilis na proyekto ” sa development server sa pamamagitan ng pagpasok ng sumusunod na command:
npm tumakbo dev 
Panghuli, mag-click sa link na 'localhost' upang ipakita ang output.
Output
Tulad ng nakikita, ang output ay nagbabalik ng isang vite na proyekto na may 'Tailwind CSS' styling.
Konklusyon
Sa Tailwind, lumikha ng ' preset ” file sa proyekto at tukuyin ang lahat ng mga pagsasaayos ng “ tailwind.config.js ” file sa loob nito. Pagkatapos nito, tukuyin ang 'preset.js' na file sa 'tailwind.config.js' na file sa tulong ng 'preset' na keyword. Ang bagong likhang 'preset.js' na file ay mag-e-embed ng lahat ng custom na CSS sa tinukoy na template katulad ng 'tailwind.config.js' na file. Ipinakita ng artikulong ito ang kumpletong pamamaraan para gumawa ng preset sa Tailwind.