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