Tailwind CSS 預(yù)設(shè)

預(yù)設(shè)

創(chuàng)建自己的可復(fù)用配置預(yù)設(shè)。

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

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

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

這對于為同一品牌管理多個(gè) Tailwind 項(xiàng)目的團(tuán)隊(duì)來說是非常有用的，他們希望有一個(gè)單一的顏色、字體和其他通用定制的源。

創(chuàng)建預(yù)設(shè)

預(yù)設(shè)就是常規(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'),
  ],
}

如您所見，預(yù)設(shè)可以包含您習(xí)慣使用的所有配置選項(xiàng)，包括主題覆蓋和擴(kuò)展、添加插件、配置前綴等等。

假設(shè)此預(yù)設(shè)保存在 ?./tailwind-preset.js?，您可以通過將其添加到您實(shí)際項(xiàng)目中的 ?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']
    },
  },
}

默認(rèn)情況下，預(yù)設(shè)本身會擴(kuò)展 Tailwind 的 默認(rèn)配置，就像您自己的配置一樣。如果您想創(chuàng)建一個(gè)預(yù)設(shè)來完全代替默認(rèn)配置，在預(yù)設(shè)本身中包含一個(gè)空的 ?presets ?鍵。

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

如何合并配置

項(xiàng)目特定的配置（那些在您的 ?tailwind.config.js? 文件中找到的配置）與預(yù)設(shè)配置合并的方式與默認(rèn)配置合并的方式相同。

?tailwind.config.js? 中的以下選項(xiàng)只是替換了預(yù)設(shè)中存在的相同選項(xiàng)：

• ?purge ?
• ?darkMode ?
• ?prefix ?
• ?important ?
• ?variantOrder ?
• ?separator?

其余的選項(xiàng)都是以該選項(xiàng)最合理的方式仔細(xì)合并的，接下來詳細(xì)解釋。

主題

?theme ?對象被淺合并，?tailwind.config.js? 中的頂層鍵替換了任何預(yù)設(shè)中相同的頂層鍵。唯一的例外是 ?extend ?鍵，它在所有配置中被收集，并應(yīng)用在主題配置的其余部分之上。

在 主題配置文檔 中了解更多關(guān)于 ?theme ?選項(xiàng)如何工作的信息。

變體

?variants ?對象和 ?theme ?對象一樣，是淺合并的，用頂層鍵替換任何預(yù)設(shè)中的相同頂層鍵。?extend ?鍵是唯一的例外，和 ?theme ?一樣，在所有配置中收集。

在 variants 配置文檔 中了解更多關(guān)于 ?variants ?選項(xiàng)如何工作的內(nèi)容。

預(yù)設(shè)

?presets ?數(shù)組是跨配置合并的，允許預(yù)設(shè)引入自己的預(yù)設(shè)，被引入的預(yù)設(shè)也可以引入自己的預(yù)設(shè)。

插件

?plugins ?數(shù)組在不同的配置中被合并，使預(yù)設(shè)可以注冊插件，同時(shí)也允許您添加額外的項(xiàng)目級插件。

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

核心插件

?corePlugins ?選項(xiàng)根據(jù)您是將其配置為對象還是數(shù)組而表現(xiàn)不同。

如果您把 ?corePlugins ?配置為一個(gè)對象，那么它就會被跨配置合并。

// ./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 ?配置為一個(gè)數(shù)組，它就會取代您配置的預(yù)設(shè)所提供的任何 ?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']
}

擴(kuò)展多個(gè)預(yù)設(shè)

?presets ?選項(xiàng)是一個(gè)數(shù)組，可以接受多個(gè)預(yù)設(shè)。如果您想把您的可重復(fù)使用的定制拆分成可以獨(dú)立導(dǎo)入的組合塊，這很有用。

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

在添加多個(gè)預(yù)設(shè)時(shí)，需要注意的是，如果它們以任何方式重疊，它們的解析方式和您自己的自定義與預(yù)設(shè)的解析方式是一樣的，最后的配置獲勝。

例如，如果這兩個(gè)配置都提供了一個(gè)自定義調(diào)色板（并且沒有使用 ?extend?），則會使用 ?configuration-b? 的調(diào)色板。

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

禁用默認(rèn)配置

如果您想完全禁用默認(rèn)配置并且不使用任何基礎(chǔ)配置，請將 ?presets ?設(shè)置為一個(gè)空數(shù)組。

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

這將完全禁用所有 Tailwind 的默認(rèn)設(shè)置，因此根本不會生成顏色、字體系列、字體大小、間距值等。

如果您想讓您的預(yù)設(shè)提供一個(gè)完整的設(shè)計(jì)系統(tǒng)，而不是擴(kuò)展 Tailwind 的默認(rèn)值，您也可以在預(yù)設(shè)中這樣做。

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

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