Tailwind CSS 预设
预设
创建自己的可复用配置预设。
默认情况下，您的 tailwind.config.js 文件中添加的任何配置将被智能的与 默认配置 合并，您自己的配置则作为一组覆盖与扩展。
presets 选项允许您指定一个不同的配置来用作您的基本配置，这使得打包一组跨项目复用的配置非常简单。
// tailwind.config.js
module.exports = {
presets: [
require('@acmecorp/tailwind-base')
],
// ...
}这对于为同一品牌管理多个 Tailwind 项目的团队来说是非常有用的，他们希望有一个单一的颜色、字体和其他通用定制的源。
创建预设
预设就是常规的 Tailwind 配置对象，与您的 tailwind.config.js 文件里添加的配置毫无二致。
// Example preset
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')
],
// Customizations specific to this project would go here
theme: {
extend: {
minHeight: {
48: '12rem',
}
}
},
variants: {
extend: {
backgroundColor: ['active']
},
},
}默认情况下，预设本身会扩展 Tailwind 的 默认配置，就像您自己的配置一样。如果您想创建一个预设来完全代替默认配置，在预设本身中包含一个空的 presets 键。
// Example preset
module.exports = {
presets: [],
theme: {
// ...
},
plugins: [
// ...
],
}如何合并配置
项目特定的配置（那些在您的 tailwind.config.js 文件中找到的配置）与预设配置合并的方式与默认配置合并的方式相同。
tailwind.config.js 中的以下选项只是替换了预设中存在的相同选项：
-
purge -
darkMode -
prefix -
important -
variantOrder -
separator
其余的选项都是以该选项最合理的方式仔细合并的，接下来详细解释。
主题
theme 对象被浅合并，tailwind.config.js 中的顶层键替换了任何预设中相同的顶层键。唯一的例外是 extend 键，它在所有配置中被收集，并应用在主题配置的其余部分之上。
在 主题配置文档 中了解更多关于 theme 选项如何工作的信息。
变体
variants 对象和 theme 对象一样，是浅合并的，用顶层键替换任何预设中的相同顶层键。extend 键是唯一的例外，和 theme 一样，在所有配置中收集。
在 variants 配置文档 中了解更多关于 variants 选项如何工作的内容。
预设
presets 数组是跨配置合并的，允许预设引入自己的预设，被引入的预设也可以引入自己的预设。
插件
plugins 数组在不同的配置中被合并，使预设可以注册插件，同时也允许您添加额外的项目级插件。
这意味着不可能禁用一个预设所添加的插件。如果您发现自己想要禁用预设中的某个插件，这说明您可能应该将该插件从预设中移除，并逐个项目地将其引用，或者 把预设拆分为两个。
核心插件
corePlugins 选项根据您是将其配置为对象还是数组而表现不同。
如果您把 corePlugins 配置为一个对象，那么它就会被跨配置合并。
// ./example-preset.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
// tailwind.config.js
module.exports = {
presets: [
require('./example-preset.js'),
],
// This configuration will be merged
corePlugins: {
cursor: false
}
}如果您把 corePlugins 配置为一个数组，它就会取代您配置的预设所提供的任何 corePlugins 配置。
// ./example-preset.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
// tailwind.config.js
module.exports = {
presets: [
require('./example-preset.js'),
],
// This will replace the configuration in the preset
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')
],
// ...
}
更多建议：