預設

創(chuàng)建自己的可復用配置預設。

默認情況下，您的 ?tailwind.config.js? 文件中添加的任何配置將被智能的與 默認配置 合并，您自己的配置則作為一組覆蓋與擴展。

?presets ?選項允許您指定一個不同的配置來用作您的基本配置，這使得打包一組跨項目復用的配置非常簡單。

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

這對于為同一品牌管理多個 Tailwind 項目的團隊來說是非常有用的，他們希望有一個單一的顏色、字體和其他通用定制的源。

創(chuàng)建預設

預設就是常規(guī)的 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 的 默認配置，就像您自己的配置一樣。如果您想創(chuàng)建一個預設來完全代替默認配置，在預設本身中包含一個空的 ?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 ?數組在不同的配置中被合并，使預設可以注冊插件，同時也允許您添加額外的項目級插件。

這意味著不可能禁用一個預設所添加的插件。如果您發(fā)現自己想要禁用預設中的某個插件，這說明您可能應該將該插件從預設中移除，并逐個項目地將其引用，或者 把預設拆分為兩個。

核心插件

?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 的默認設置，因此根本不會生成顏色、字體系列、字體大小、間距值等。

如果您想讓您的預設提供一個完整的設計系統(tǒng)，而不是擴展 Tailwind 的默認值，您也可以在預設中這樣做。

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

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