预设 - Tailwind CSS 中文

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

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

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

假设此预设保存在 ./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 的默认配置，就像您自己的配置一样。如果您想创建一个完全替换默认配置的预设，请在预设本身中包含一个空的 presets 键

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

有关更多信息，请阅读有关禁用默认配置的内容。

深入了解合并逻辑

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

在tailwind.config.js中的以下选项，如果在预设中存在，则会简单地**替换**相同的选项

content
darkMode
prefix
important
variantOrder
separator
safelist

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

主题

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

详细了解 theme 选项在主题配置文档中的工作原理。

预设

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

插件

plugins 数组在不同配置之间合并，以便预设可以注册插件，同时允许您在项目级别添加额外的插件。

这意味着无法禁用由预设添加的插件。如果您发现自己想要禁用预设中的插件，这表明您可能应该从预设中删除该插件，并改为在每个项目的基础上包含它，或者将您的预设拆分为两个预设。

核心插件

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

在本页上