Tailwind CSS 预设

预设

创建自己的可复用配置预设。

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

​presets ​选项允许您指定一个不同的配置来用作您的基本配置，这使得打包一组跨项目复用的配置非常简单。

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

如您所见，预设可以包含您习惯使用的所有配置选项，包括主题覆盖和扩展、添加插件、配置前缀等等。

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

// tailwind.config.js
module.exports = {
  presets: [
    require('./tailwind-preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active']
    },
  },
}

默认情况下，预设本身会扩展 Tailwind 的 默认配置，就像您自己的配置一样。如果您想创建一个预设来完全代替默认配置，在预设本身中包含一个空的 ​presets ​键。

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

如何合并配置

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

​tailwind.config.js​ 中的以下选项只是替换了预设中存在的相同选项：

• ​purge ​
• ​darkMode ​
• ​prefix ​
• ​important ​
• ​variantOrder ​
• ​separator​

其余的选项都是以该选项最合理的方式仔细合并的，接下来详细解释。

主题

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

在 主题配置文档 中了解更多关于 ​theme ​选项如何工作的信息。

变体

​variants ​对象和 ​theme ​对象一样，是浅合并的，用顶层键替换任何预设中的相同顶层键。​extend ​键是唯一的例外，和 ​theme ​一样，在所有配置中收集。

在 variants 配置文档 中了解更多关于 ​variants ​选项如何工作的内容。

预设

​presets ​数组是跨配置合并的，允许预设引入自己的预设，被引入的预设也可以引入自己的预设。

插件

​plugins ​数组在不同的配置中被合并，使预设可以注册插件，同时也允许您添加额外的项目级插件。

这意味着不可能禁用一个预设所添加的插件。如果您发现自己想要禁用预设中的某个插件，这说明您可能应该将该插件从预设中移除，并逐个项目地将其引用，或者 把预设拆分为两个。

核心插件

​corePlugins ​选项根据您是将其配置为对象还是数组而表现不同。

如果您把 ​corePlugins ​配置为一个对象，那么它就会被跨配置合并。

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}

如果您把 ​corePlugins ​配置为一个数组，它就会取代您配置的预设所提供的任何 ​corePlugins ​配置。

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}

扩展多个预设

​presets ​选项是一个数组，可以接受多个预设。如果您想把您的可重复使用的定制拆分成可以独立导入的组合块，这很有用。

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

在添加多个预设时，需要注意的是，如果它们以任何方式重叠，它们的解析方式和您自己的自定义与预设的解析方式是一样的，最后的配置获胜。

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

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

禁用默认配置

如果您想完全禁用默认配置并且不使用任何基础配置，请将 ​presets ​设置为一个空数组。

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

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

如果您想让您的预设提供一个完整的设计系统，而不是扩展 Tailwind 的默认值，您也可以在预设中这样做。

// ./example-preset.js
module.exports = {
  presets: [],
  // ...
}

// tailwind.config.js
module.exports = {
  presets: [
    require('./example-preset.js')
  ],
  // ...
}