Тази статия разработва пълната процедура за създаване на предварителна настройка в Tailwind.
Как да създадете „Предварителна настройка“ в Tailwind?
Попътен вятър “ Предварителни настройки ” се считат за обикновени конфигурационни обекти, които указват същата конфигурация, както е посочена в конфигурационния файл „tailwind.config.js”. „Предварително зададеният“ файл не е създаден по подразбиране, но може да бъде създаден, като следвате дадените по-долу стъпки:
Стъпка 1: Създайте „Предварително зададен“ файл
Първо създайте „ preset.js ” файл в проекта Tailwind и добавете всички желани опции за конфигурация като разширения, замени на теми, добавяне на добавки и много други:
// Примерна предварителна настройка
модул. износ = {
тема : {
цветове : {
син : {
светлина : '#85d7ff' ,
ПО ПОДРАЗБИРАНЕ : '#1fb6ff' ,
тъмно : '#009 седло' ,
} ,
розово : {
светлина : '#ff7ce5' ,
ПО ПОДРАЗБИРАНЕ : '#ff49db' ,
тъмно : '#ff16d1' ,
} ,
сиво : {
най-тъмен : „#1f2d3d“ ,
тъмно : „#3c4858“ ,
ПО ПОДРАЗБИРАНЕ : 'в #c0cc' ,
светлина : '#e0e6ed' ,
най-лекият : '#f9fafc' ,
}
} ,
шрифтово семейство : {
без : [ 'графика' , 'без серифи' ] ,
} ,
Натиснете ' Ctrl+S ”, за да запазите горния файл.
Стъпка 2: Редактирайте файла „tailwind.config.js“.
След това отворете „ tailwind.config.js ” конфигурационен файл, посочете името на пътищата на шаблона, както и посочете „ preset.js ' файл с ' предварително зададени настройки ” ключова дума:
модул. износ = {
съдържание : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
предварително зададени настройки : [
( 'preset.js' )
]
}
Натиснете ' Ctrl+S ”, за да запазите файла.
Стъпка 3: Стартирайте приложението
Сега стартирайте съществуващия „ бърз проект ” в сървъра за разработка, като въведете следната команда:
npm стартиране dev 
Накрая щракнете върху връзката „localhost“, за да покажете резултата.
Изход
Както се вижда, изходът връща vite проект със стил „Tailwind CSS“.
Заключение
В Tailwind създайте „ предварително зададени ” в проекта и задайте всички конфигурации на „ tailwind.config.js ” файл в него. След това посочете файла „preset.js“ във файла „tailwind.config.js“ с помощта на ключовата дума „preset“. Новосъздаденият файл „preset.js“ ще вгради целия персонализиран CSS в посочения шаблон, също като файла „tailwind.config.js“. Тази статия демонстрира пълната процедура за създаване на предварителна настройка в Tailwind.