预设
创建您自己的可重复使用的配置预设。
默认情况下，您在自己的 tailwind.config.js 文件中添加的任何配置都会智能地与默认配置合并，您自己的配置将作为一组覆盖和扩展。
presets 选项允许您指定一个不同的配置作为基础，这样可以轻松打包一组自定义内容，以便在项目之间重复使用。
/** @type {import('tailwindcss').Config} */
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'),
],
}正如你所看到的，预设可以包含你习惯的所有配置选项，包括主题覆盖和扩展、添加插件、配置前缀等等。更多详情请阅读有关配置合并的内容。
假设这个预设是在 ./my-preset.js 保存的，你可以通过将它添加到你实际项目中的 tailwind.config.js 文件的 presets 键来使用它：
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('./my-preset.js')
],
// Customizations specific to this project would go here
theme: {
extend: {
minHeight: {
48: '12rem',
}
}
},
}默认情况下，预设本身会像您自己的配置一样扩展 Tailwind 的默认配置。如果您想创建一个完全替换默认配置的预设，请在预设本身中包含一个空的 presets 键：
// Example preset
module.exports = {
presets: [],
theme: {
// ...
},
plugins: [
// ...
],
}有关更多信息，请阅读有关禁用默认配置的内容。
深入了解合并逻辑
项目特定配置（在您的 tailwind.config.js 文件中找到的配置）与默认配置合并的方式与它们与默认配置合并的方式相同。
在 tailwind.config.js 中的以下选项只是替换预设中存在的相同选项：
contentdarkModeprefiximportantvariantOrderseparatorsafelist
剩下的选项都是根据各自的情况仔细合并的，下面会更详细地解释。
主题
theme 对象是浅层合并的，在 tailwind.config.js 的顶层键替换任何预设中相同的顶层键。唯一的例外是 extend 键，它会跨所有配置收集，并应用于主题配置的其余部分之上。
了解有关 theme 选项在主题配置文档中的工作方式的更多信息。
预设
presets 数组在配置之间进行合并，允许预设包含它们自己的预设，这些预设也可以包含它们自己的预设。
插件
plugins 数组在配置之间合并，使得预设可以注册插件，同时也允许在项目级别添加额外的插件。
这意味着无法禁用由预设添加的插件。如果你发现自己想要在预设中禁用一个插件，这表明你可能应该从预设中移除该插件，而是在项目之间逐个包含它，或者将你的预设拆分为两个预设。
核心插件
corePlugins 选项的行为取决于您将其配置为对象还是数组。
如果您将 corePlugins 配置为对象，则它将在配置之间合并。
module.exports = {
// ...
corePlugins: {
float: false,
},
}/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('./my-preset.js'),
],
// 该配置将被合并
corePlugins: {
cursor: false
}
}如果您将 corePlugins 配置为数组，则会替换已由您配置的预设的 corePlugins 配置。
module.exports = {
// ...
corePlugins: {
float: false,
},
}/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('./example-preset.js'),
],
// 这将替换预设中的配置
corePlugins: ['float', 'padding', 'margin']
}扩展多个预设
presets 选项是一个数组，可以接受多个预设。如果您想将可重用的自定义内容拆分成可独立导入的可组合块，这将非常有用。
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('@acmecorp/tailwind-colors'),
require('@acmecorp/tailwind-fonts'),
require('@acmecorp/tailwind-spacing'),
]
}在添加多个预设时，重要的是要注意，如果它们在任何方面重叠，它们会以与您自己的定制相同的方式解决，并且最后的配置会获胜。
例如，如果这两个配置都提供了自定义的颜色板（并且没有使用 extend ），则将使用 configuration-b 的颜色板：
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('@acmecorp/configuration-a'),
require('@acmecorp/configuration-b'),
]
}禁用默认配置
如果您想完全禁用默认配置，并且从零基础配置开始，请将 presets 设置为空数组：
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [],
// ...
}这将完全禁用 Tailwind 的所有默认设置，因此不会生成任何颜色、字体系列、字体大小、间距值等。
如果您希望预设提供完整的设计系统，而不是扩展 Tailwind 的默认设置，也可以在预设中执行此操作。
module.exports = {
presets: [],
// ...
}/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('./my-preset.js')
],
// ...
}