预设 - Tailwind CSS 中文网

默认情况下，你在自己的 tailwind.config.js 文件中添加的任何配置都会与默认配置智能合并，你自己的配置将作为一组覆盖和扩展。

🌐 By default, any configuration you add in your own tailwind.config.js file is intelligently merged with the default configuration, with your own configuration acting as a set of overrides and extensions.

presets 选项允许你指定一个 不同的 配置作为基础，这样可以轻松打包一组你希望在多个项目中重复使用的自定义设置。

🌐 The presets option lets you specify a different configuration to use as your base, making it easy to package up a set of customizations that you’d like to reuse across projects.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

这对于管理同一品牌多个 Tailwind 项目的团队非常有用，他们希望拥有一个关于颜色、字体和其他常见自定义的单一权威来源。

🌐 This can be very useful for teams that manage multiple Tailwind projects for the same brand where they want a single source of truth for colors, fonts, and other common customizations.

创建预设(Creating a preset)

预设只是普通的 Tailwind 配置对象，其格式与你在 tailwind.config.js 文件中添加的配置完全相同。

🌐 Presets are just regular Tailwind configuration objects, taking the exact same shape as the configuration you would add in your tailwind.config.js file.

my-preset.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'),
  ],
}

正如你所看到的，预设可以包含你习惯的所有配置选项，包括主题覆盖和扩展、添加插件、配置前缀等等。有关更多详细信息，请阅读配置如何合并。

🌐 As you can see, presets can contain all of the configuration options you’re used to, including theme overrides and extensions, adding plugins, configuring a prefix, and so on. Read about how configurations are merged for more details.

假设此预设已保存为 ./my-preset.js，你可以通过将其添加到实际项目中的 tailwind.config.js 文件的 presets 键下使用它：

🌐 Assuming this preset was saved at ./my-preset.js, you would use it by adding it to the tailwind.config.js file in your actual project under the presets key:

tailwind.config.js

/** @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 键：

🌐 By default, presets themselves extend Tailwind’s default configuration just like your own configuration would. If you’d like to create a preset that completely replaces the default configuration, include an empty presets key in the preset itself:

// Example preset
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

欲了解更多信息，请阅读关于禁用默认配置的内容。

🌐 For more information, read about disabling the default configuration.

深入合并逻辑(Merging logic in-depth)

项目特定的配置（在你的 tailwind.config.js 文件中找到的配置）会像与默认配置合并一样与预设进行合并。

🌐 Project-specific configurations (those found in your tailwind.config.js file) are merged against presets the same way they are merged against the default configuration.

tailwind.config.js 中的以下选项如果在预设中已存在，只会替换相同的选项：

🌐 The following options in tailwind.config.js simply replace the same option if present in a preset:

content
darkMode
prefix
important
variantOrder
separator
safelist

其余的选项都经过了仔细合并，以最适合该选项的方式进行，下面会详细说明。

🌐 The remaining options are each carefully merged in the way that makes the most sense for that option, explained in more detail below.

主题(Theme)

theme 对象是浅合并的，tailwind.config.js 中的顶层键会替换任何预设中的相同顶层键。例外的是 extend 键，它会在所有配置中收集，并应用到其余的主题配置之上。

🌐 The theme object is merged shallowly, with top-level keys in tailwind.config.js replacing the same top-level keys in any presets. The exception to this is the extend key, which is collected across all configurations and applied on top of the rest of the theme configuration.

了解更多关于 theme 选项如何工作的内容，请参阅主题配置文档。

🌐 Learn more about how the theme option works in the theme configuration documentation.

预设(Presets)

presets 数组在各个配置之间进行合并，允许预设包含它们自己的预设，而这些预设也可以包含它们自己的预设。

🌐 The presets array is merged across configurations, allowing presets to include their own presets, which can also include their own presets.

插件(Plugins)

plugins 数组在各个配置中被合并，以便预设可以注册插件，同时也允许你在项目级别添加额外的插件。

🌐 The plugins array is merged across configurations to make it possible for a preset to register plugins while also allowing you to add additional plugins at the project-level.

这意味着无法禁用由预设添加的插件。如果你发现自己想在预设中禁用某个插件，这通常是一个信号，表明你可能应该从预设中移除该插件，并改为在每个项目中单独包含它，或者将你的预设拆分成两个预设。

🌐 This means it’s not possible to disable a plugin that has been added by a preset. If you find yourself wanting to disable a plugin in a preset, it’s a sign that you should probably remove that plugin from the preset and include it on a project-by-project basis instead, or split your preset into two presets.

核心插件(Core plugins)

corePlugins 选项的行为取决于你将其配置为对象还是数组。

🌐 The corePlugins option behaves differently depending on whether you configure it as an object or as an array.

如果你将 corePlugins 配置为对象，它将在各个配置中合并。

🌐 If you configure corePlugins as an object, it is merged across configurations.

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}

如果你将 corePlugins 配置为数组，它会替换你所配置的预设中提供的任何 corePlugins 配置。

🌐 If you configure corePlugins as an array, it replaces any corePlugins configuration provided by your configured preset(s).

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}

扩展多个预设(Extending multiple presets)

presets 选项是一个数组，可以接受多个预设。这在你希望将可复用的自定义配置拆分成可组合的模块并独立导入时非常有用。

🌐 The presets option is an array and can accept multiple presets. This is useful if you want to split your reusable customizations up into composable chunks that can be imported independently.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

在添加多个预设时，需要注意的是，如果它们有任何重叠，它们的处理方式与你的自定义设置与预设的处理方式相同，最终以最后的配置为准。

🌐 When adding multiple presets, it’s important to note that if they overlap in any way, they are resolved the same way your own customizations are resolved against a preset, and the last configuration wins.

例如，如果这两个配置都提供了自定义颜色调色板（并且没有使用 extend），则会使用来自 configuration-b 的颜色调色板：

🌐 For example, if both of these configurations provided a custom color palette (and were not using extend), the color palette from configuration-b would be used:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

禁用默认配置(Disabling the default configuration)

如果你想完全禁用默认配置并从零开始，设置 presets 为一个空数组即可：

🌐 If you’d like to completely disable the default configuration and start with no base configuration at all, set presets to an empty array:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  // ...
}

这将完全禁用 Tailwind 的所有默认设置，因此不会生成任何颜色、字体系列、字体大小、间距值等。

🌐 This will completely disable all of Tailwind’s defaults, so no colors, font families, font sizes, spacing values, etc. will be generated at all.

如果你希望你的预设本身能够提供完整的设计系统，而不扩展 Tailwind 的默认设置，你也可以在预设内部执行此操作：

🌐 You can also do this from within a preset if you’d like your preset to provide a complete design system on its own that doesn’t extend Tailwind’s defaults:

my-preset.js

module.exports = {
  presets: [],
  // ...
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}

目录