預設值

預設情況下，您在自己的 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 中，您可以在實際專案的 tailwind.config.js 檔案中新增 presets 金鑰來使用它

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

在此頁面