预设 - 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，你可以通过在 presets 键下将它添加到实际项目中的 tailwind.config.js 文件来使用它：

¥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')
  ],
  // ...
}

目录