预设 - Tailwind CSS

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 选项允许您指定一个_不同_的配置作为基础，从而轻松打包一组您想要在项目之间重复使用的自定义设置。

tailwind.config.js

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

对于管理同一品牌的多个 Tailwind 项目的团队来说，这非常有用，他们希望获得颜色、字体和其他常见定制的单一真实来源。

创建预设

预设只是常规的 Tailwind 配置对象，其形状与您在 tailwind.config.js 文件中添加的配置完全相同。

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

如您所见，预设可以包含您习惯的所有配置选项，包括主题覆盖和扩展、添加插件、配置前缀等。阅读有关 how configurations are merged 的更多详细信息。

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

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 的 default configuration。如果您想创建一个完全替换默认配置的预设，请在预设本身中包含一个空的 presets 键：

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

欲了解更多信息，请阅读disabling the default configuration。

深入合并逻辑

项目特定的配置（在 tailwind.config.js 文件中找到的配置）与预设的合并方式与默认配置的合并方式相同。

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

content
darkMode
prefix
important
variantOrder
separator
safelist

其余选项均以最适合该选项的方式仔细合并，下面将详细解释。

主题

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

详细了解 theme 选项在 theme configuration documentation 中的工作原理。

预设

presets 数组跨配置合并，允许预设包含自己的预设，预设也可以包含自己的预设。

插件

plugins 数组在配置之间合并，使得预设可以注册插件，同时还允许您在项目级别添加其他插件。

这意味着无法禁用由预设添加的插件。如果您发现自己想要禁用预设中的插件，这表明您可能应该从预设中移除该插件，而是将其包含在各个项目中，或者 split your preset into two presets。

核心插件

corePlugins 选项的行为根据您将其配置为对象还是数组而有所不同。

如果将 corePlugins 配置为对象，它会在配置之间合并。

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 配置。

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']
}

扩展多个预设

presets 选项是一个数组，可以接受多个预设。如果您想将可重复使用的自定义项拆分为可单独导入的可组合块，这将非常有用。

tailwind.config.js

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

添加多个预设时，请务必注意，如果它们以任何方式重叠，则它们的解析方式与您自己的自定义预设的解析方式相同，并且最后的配置获胜。

例如，如果这两种配置都提供了自定义调色板（并且未使用 extend），则将使用 configuration-b 中的调色板：

tailwind.config.js

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

禁用默认配置

如果您想完全禁用默认配置并且根本没有基本配置，请将 presets 设置为空数组：

tailwind.config.js

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

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

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

my-preset.js

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

tailwind.config.js

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

On this page