Создание собственных предустановок конфигурации многократного использования.
По умолчанию любая конфигурация, которую вы добавляете в свой собственный файл tailwind.config.js, разумно объединяется с конфигурацией по умолчанию с Вашей собственной конфигурацией, действующей как набор переопределений и расширений.
Опция presets позволяет вам указать различную конфигурацию для использования в качестве основы, что упрощает пакетирование набора настроек, которые вы хотели бы повторно использовать в проектах.
// tailwind.config.js
module.exports = {
presets: [
require('@acmecorp/tailwind-base')
],
// ...
}Это может быть очень полезно для команд, которые управляют несколькими проектами Tailwind для одного и того же бренда, где им нужен единый источник достоверной информации о цветах, шрифтах и других общих настройках.
Пресеты - это обычные объекты конфигурации Tailwind, принимающие ту же форму, что и конфигурация, которую вы добавляете в свой файл tailwind.config.js.
// Пример предустановки
module.exports = {
theme: {
colors: {
blue: {
light: '#85d7ff',
DEFAULT: '#1fb6ff',
dark: '#009eeb',
},
pink: {
light: '#ff7ce5',
DEFAULT: '#ff49db',
dark: '#ff16d1',
},
gray: {
darkest: '#1f2d3d',
dark: '#3c4858',
DEFAULT: '#c0ccda',
light: '#e0e6ed',
lightest: '#f9fafc',
}
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
},
extend: {
flexGrow: {
2: '2',
3: '3',
},
zIndex: {
60: '60',
70: '70',
80: '80',
90: '90',
100: '100',
},
}
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}Как видите, предустановки могут содержать все параметры конфигурации, к которым вы привыкли, включая переопределения и расширения тем, добавление плагинов, настройку префикса и т. д. Прочтите как объединяются конфигурации для получения более подробной информации.
Предполагая, что этот пресет был сохранен в ./tailwind-preset.js, вы можете использовать его, добавив его в файл tailwind.config.js в Вашем фактическом проекте под ключом presets:
// tailwind.config.js
module.exports = {
presets: [
require('./tailwind-preset.js')
],
// Здесь можно найти настройки, относящиеся к этому проекту
theme: {
extend: {
minHeight: {
48: '12rem',
}
}
},
variants: {
extend: {
backgroundColor: ['active']
},
},
}По умолчанию сами пресеты расширяют конфигурацию Tailwind по умолчанию, как и Ваша собственная конфигурация. Если вы хотите создать пресет, который полностью заменяет конфигурацию по умолчанию, включите в сам пресет пустую ключ presets:
// Пример предустановки
module.exports = {
presets: [],
theme: {
// ...
},
plugins: [
// ...
],
}Для получения дополнительной информации прочтите о отключении конфигурации по умолчанию.
Конфигурации для конкретного проекта (те, что находятся в Вашем файле tailwind.config.js) объединяются с пресетами так же, как они объединяются с конфигурацией по умолчанию.
Следующие параметры в tailwind.config.js просто перезаписывают тот же параметр, если он присутствует в пресете:
purgedarkModeprefiximportantvariantOrderseparatorКаждый из оставшихся вариантов тщательно объединен таким образом, чтобы он был наиболее целесообразным для этого варианта, что более подробно объясняется далее.
Объект theme объединяется неглубоко, причем ключи верхнего уровня в tailwind.config.js заменяют те же самые ключи верхнего уровня в любых пресетах. Исключением является ключ extend, который собирается во всех конфигурациях и применяется поверх остальной конфигурации темы.
Узнайте больше о том, как работает опция theme в документации по настройке темы.
Объект variants объединяется неглубоко, как и объект theme, причем ключи верхнего уровня заменяют одни и те же ключи верхнего уровня в любых пресетах. Ключ extend - единственное исключение, и он собирается во всех конфигурациях, как и в случае с theme.
Узнайте больше о том, как работает опция variants, в документации по конфигурации вариантов.
Массив presets объединен во всех конфигурациях, что позволяет предустановкам включать свои собственные предустановки, которые также могут включать свои собственные предустановки.
Массив plugins объединен между конфигурациями, чтобы позволить предустановке регистрировать плагины, а также позволяет вам добавлять дополнительные плагины на уровне проекта.
Это означает, что отключить плагин, добавленный с помощью предустановки, невозможно. Если вы обнаружите, что хотите отключить плагин в предустановке, это признак того, что Вам, вероятно, следует удалить этот плагин из предустановки и вместо этого включать его для каждого проекта или разделить предустановку на две предустановки.
Параметр corePlugins ведет себя по-разному в зависимости от того, настроили ли вы его как объект или как массив.
Если вы сконфигурируете corePlugins как объект, он будет объединен во всех конфигурациях.
// ./example-preset.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
// tailwind.config.js
module.exports = {
presets: [
require('./example-preset.js'),
],
// Эта конфигурация будет объединена
corePlugins: {
cursor: false
}
}Если вы сконфигурируете corePlugins как массив, он заменит любую конфигурацию corePlugins, предоставленную Вашим настроенным пресет(ом)(ами).
// ./example-preset.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
// tailwind.config.js
module.exports = {
presets: [
require('./example-preset.js'),
],
// Это заменит конфигурацию в предустановке
corePlugins: ['float', 'padding', 'margin']
}Параметр presets представляет собой массив и может принимать несколько предустановок. Это полезно, если вы хотите разделить свои повторно используемые настройки на составляемые блоки, которые можно импортировать независимо.
// tailwind.config.js
module.exports = {
presets: [
require('@acmecorp/tailwind-colors'),
require('@acmecorp/tailwind-fonts'),
require('@acmecorp/tailwind-spacing'),
]
}При добавлении нескольких предустановок важно отметить, что если они каким-либо образом пересекаются, они разрешаются так же, как Ваши собственные настройки сравниваются с предустановкой, и последняя конфигурация побеждает.
Например, если обе эти конфигурации предоставляют пользовательскую цветовую палитру (и не используют extend), будет использоваться цветовая палитра из configuration-b:
// tailwind.config.js
module.exports = {
presets: [
require('@acmecorp/configuration-a'),
require('@acmecorp/configuration-b'),
]
}Если вы хотите полностью отключить конфигурацию по умолчанию и начать без базовой конфигурации, установите presets в пустой массив:
// tailwind.config.js
module.exports = {
presets: [],
// ...
}Это полностью отключит все настройки Tailwind по умолчанию, поэтому цвета, семейства шрифтов, размеры шрифтов, значения интервалов и т. д. не будут генерироваться вообще.
Вы также можете сделать это из предустановки, если хотите, чтобы Ваша предустановка предоставляла полную систему дизайна сама по себе, которая не расширяет настройки Tailwind по умолчанию:
// ./example-preset.js
module.exports = {
presets: [],
// ...
}
// tailwind.config.js
module.exports = {
presets: [
require('./example-preset.js')
],
// ...
}