tailwindcss 官網（八）定制：插件、預設（presets、合并配置）

官網：安裝 - Tailwind CSS 中文檔案

• Tailwind 是一個構建定制用戶界面的框架，所以從開始設計時便考慮了定制，
• !important
  • 這個屬性可以讓瀏覽器優選執行這個陳述句，加上!importanrt可以覆寫父級的樣式

1. 插件

使用可復用的第三方插件擴展 Tailwind，

概述

插件讓您注冊新的樣式，讓 Tailwind 使用 JavaScript 代替 CSS 注入用戶的樣式表，

要開始您的第一個插件，先從 tailwindcss/plugin 匯入 Tailwind 的 plugin 函式，然后在您的 plugins 陣列中，呼叫這個函式，用一個匿名函式作為其第一個引數，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, prefix, config }) {
      // Add your custom styles here
    }),
  ]
}

插件函式接收一個單一的物件引數，可以 destructured 成幾個幫助函式，

• addUtilities(), for registering new utility styles
• addComponents(), for registering new component styles
• addBase(), for registering new base styles
• addVariant(), for registering custom variants
• e(), for escaping strings meant to be used in class names
• prefix(), for manually applying the user’s configured prefix to parts of a selector
• theme(), for looking up values in the user’s theme configuration
• variants(), for looking up values in the user’s variants configuration
• config(), for looking up values in the user’s Tailwind configuration
• postcss, for doing low-level manipulation with PostCSS directly

添加功能類

addUtilities 函式允許您在 Tailwind 的 utilities 層注冊新的樣式，

插件功能類的輸出順序是按照其注冊的順序，在內置的功能類之后，所以如果一個插件的作用目標是任何一個與內置功能類相同的屬性，插件功能類將優先，

要從插件中添加新的功能類，呼叫 addUtilities，使用 CSS-in-JS 語法 傳遞您的樣式，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)',
        },
      }

      addUtilities(newUtilities)
    })
  ]
}

前綴 和 important 參考

默認情況下，插件功能類會自動遵守用戶的 prefix 和 important 偏好，

也就是說，如果給出這樣的 Tailwind 配置：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}

…上面的示例插件會生成以下CSS:

.tw-skew-10deg {
  transform: skewY(-10deg) !important;
}
.tw-skew-15deg {
  transform: skewY(-15deg) !important;
}

如果有必要，您可以通過向 addUtilities 傳遞一個選項物件作為第二個引數來選擇不使用這種行為，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, {
        respectPrefix: false,
        respectImportant: false,
      })
    })
  ]
}

變體

要生成 responsive、hover、focus、active 或樣式的其它變體，請使用 variants 選項指定您想生成的變體，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, {
        variants: ['responsive', 'hover'],
      })
    })
  ]
}

如果您只需要指定變體，而不需要選擇不使用默認的前綴或 important 選項，您也可以直接將變體陣列作為第二個引數傳遞，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

如果您希望用戶在他們的 tailwind.config.js 檔案中的 variants 部分提供自己的變體，您可以使用 variants() 函式來獲取他們配置的變體，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    customPlugin: ['responsive', 'hover'],
  },
  plugins: [
    plugin(function({ addUtilities, variants }) {
      const newUtilities = {
        // ...
      }

      addUtilities(newUtilities, variants('customPlugin'))
    })
  ]
}

增加組件

addComponents 函式允許您在 Tailwind 的 components 層注冊新的樣式，

用它來添加更個性化、更復雜的類，比如按鈕、表單控制元件、警告等；就是您在其他框架中經常看到的您可能需要使用功能類覆寫的那種預建組件，

要從插件中添加新的組件樣式，呼叫 addComponents ，使用 CSS-in-JS 語法 傳遞您的樣式，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2779bd'
          },
        },
        '.btn-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a'
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

前綴 和 important 參考

默認情況下，組件類自動遵守用戶的 prefix 偏好，但不受用戶的 important 偏好的影響，

這意味著如果有以下 Tailwind 配置：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}

…上面的示例插件將生成以下 CSS:

.tw-btn {
  padding: .5rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
}
.tw-btn-blue {
  background-color: #3490dc;
  color: #fff;
}
.tw-btn-blue:hover {
  background-color: #2779bd;
}
.tw-btn-blue {
  background-color: #e3342f;
  color: #fff;
}
.tw-btn-blue:hover {
  background-color: #cc1f1a;
}

雖然很少有一個很好的理由讓組件宣告 important，但如果您真的需要這樣做，您可以手動添加 !important ，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem !important',
          borderRadius: '.25rem !important',
          fontWeight: '600 !important',
        },
        // ...
      }

      addComponents(buttons)
    })
  ]
}

選擇器中的所有類都會默認添加前綴，所以如果您添加一個更復雜的樣式，比如：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        // ...
        '.navbar-inverse a.nav-link': {
            color: '#fff',
        }
      }

      addComponents(components)
    })
  ]
}

…將生成以下的 CSS:

.tw-navbar-inverse a.tw-nav-link {
    color: #fff;
}

要選擇不使用前綴，可以傳遞一個 options 物件作為第二個引數給 addComponents：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        // ...
      }

      addComponents(components, {
        respectPrefix: false
      })
    })
  ]
}

變體

要生成組件的 responsive、hover、focus、active或其他變體，請使用 variants 選項指定您想生成的變體，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, {
        variants: ['responsive', 'hover'],
      })
    })
  ]
}

如果您只需要指定變體，而不需要選擇不使用默認的前綴或 important 選項，您也可以直接將變體陣列作為第二個引數傳遞，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, ['responsive', 'hover'])
    })
  ]
}

如果您希望用戶在他們的 tailwind.config.js 檔案中的 variants 部分提供自己的變體，您可以使用 variants() 函式來獲取他們配置的變體，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    customPlugin: ['responsive', 'hover'],
  },
  plugins: [
    plugin(function({ addComponents, variants }) {
      const newComponents = {
        // ...
      }

      addComponents(newComponents, variants('customPlugin'))
    })
  ]
}

添加基礎樣式

addBase 函式允許您在 Tailwind 的 base 層注冊新的樣式，

使用它來添加諸如基本的排版樣式、個性化的全域重置或 @font-face 規則，

要從插件中添加新的基礎樣式，呼叫 addBase，使用 CSS-in-JS 語法 傳遞您的樣式，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, config }) {
      addBase({
        'h1': { fontSize: config('theme.fontSize.2xl') },
        'h2': { fontSize: config('theme.fontSize.xl') },
        'h3': { fontSize: config('theme.fontSize.lg') },
      })
    })
  ]
}

由于基本樣式是針對 div、h1 等裸選擇器的，所以它們不遵從用戶的 prefix 或 important 配置，

轉義類名

如果您的插件生成的類中包含用戶提供的字串，您可以使用 e 函式來轉義這些類名，以確保非標準字符被正確地自動處理，

例如，這個插件生成了一組 .rotate-{angle} 功能類，其中 {angle} 是用戶提供的字串，e 函式用于轉義連接的類名，以確保像 .rotate-1/4 這樣的類能按預期作業，

// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    rotate: {
      '1/4': '90deg',
      '1/2': '180deg',
      '3/4': '270deg',
    }
  },
  plugins: [
    plugin(function({ addUtilities, config, e }) {
      const rotateUtilities = _.map(config('theme.rotate'), (value, key) => {
        return {
          [`.${e(`rotate-${key}`)}`]: {
            transform: `rotate(${value})`
          }
        }
      })

      addUtilities(rotateUtilities)
    })
  ]
}

這個插件會生成以下CSS：

.rotate-1\/4 {
  transform: rotate(90deg);
}
.rotate-1\/2 {
  transform: rotate(180deg);
}
.rotate-3\/4 {
  transform: rotate(270deg);
}

注意只轉義您真正想轉義的內容；不要在類名中傳遞前導的 . 或在 :hover 或 :focus 等偽類的開頭傳遞 :，否則這些字符將被轉義，

此外，因為 CSS 有關于類名的規則（類名不能以數字開頭，但可以包含數字），所以最好是轉義完整的類名（不只是用戶提供的部分），否則您可能會得到不必要的轉義序列，

// Will unnecessarily escape `1`
`.rotate-${e('1/4')}`
// => '.rotate-\31 \/4'

// Won't escape `1` because it's not the first character
`.${e('rotate-1/4')}`
// => '.rotate-1\/4'

手動給選擇器加前綴

如果您正在寫一些復雜的東西，您只想給某些類加前綴，您可以使用 prefix 函式來精細控制何時應用用戶配置的前綴，

例如，如果您正在創建一個插件，以便在一組內部專案中重復使用，在其選擇器中包含現有的類，您可能只想給新的類加上前綴，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents, prefix }) {
      addComponents({
        [`.existing-class > ${prefix('.new-class')}`]: {
          backgroundColor: '#fff',
        }
      })
    })
  ]
}

這將生成以下CSS：

.existing-class > .tw-new-class {
  background-color: #fff;
}

prefix 函式會給選擇器中的所有類加前綴，而忽略不是類的選擇器，所以傳遞像這樣復雜的選擇器是完全安全的，

prefix('.btn-blue .w-1\/4 > h1.text-xl + a .bar')
// => '.tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar'

參考用戶配置

config、theme 和 variants 函式允許您使用點符號從用戶的 Tailwind 配置中獲取一個值，如果該路徑不存在，則提供一個默認值，

例如，這個簡化版的內置 容器 插件使用 theme 函式來獲取用戶配置的斷點，

// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents, theme }) {
      const screens = theme('screens', {})

      const mediaQueries = _.map(screens, width => {
        return {
          [`@media (min-width: ${width})`]: {
            '.container': {
              'max-width': width,
            },
          },
        }
      })

      addComponents([
        { '.container': { width: '100%' } },
        ...mediaQueries,
      ])
    })
  ]
}

請注意，theme 函式實際上只是使用 config 函式訪問用戶配置的主題部分的一個快捷方式，

// These are equivalent
config('theme.screens')
theme('screens')

如果您想參考用戶的 variants 配置，建議您使用 variants() 函式而不是 config 函式，

不要使用 config 函式來查找變體

addUtilities(newUtilities, config('variants.customPlugin'))

使用 variants 函式代替

addUtilities(newUtilities, variants('customPlugin'))

由于 variants 可以簡單地成為一個全域的變體串列，為整個專案中的每一個插件進行配置，所以使用 variants() 函式可以讓您很容易地遵從用戶的配置，而不是自己重新實作這個邏輯，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: ['responsive', 'hover', 'focus'],
  plugins: [
    plugin(function ({ config, variants }) {
      config('variants.customPlugin')
      // => undefined

      variants('customPlugin')
      // => ['reponsive', 'hover', 'focus']
    })
  ]
}

暴露選項

通常情況下，一個插件暴露自己的選項是有意義的，用戶可以配置這些選項來定制插件的行為，

最好的方法是在用戶的 theme 和 variants 配置中定義自己的鍵，并要求他們在那里提供任何選項，這樣您就可以通過 theme 和 variants 函式訪問它們，

例如，這里有一個插件*(提取到自己的模塊)*，用于創建簡單的漸變功能類，接受要生成的漸變值和變體做為選項，

// ./plugins/gradients.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, e, theme, variants }) {
  const gradients = theme('gradients', {})
  const gradientVariants = variants('gradients', [])

  const utilities = _.map(gradients, ([start, end], name) => ({
    [`.${e(`bg-gradient-${name}`)}`]: {
      backgroundImage: `linear-gradient(to right, ${start}, ${end})`
    }
  }))

  addUtilities(utilities, gradientVariants)
})

要使用它，您需要在您的插件串列中 require 它，在 theme 和 variants 中的 gradients 鍵下指定您的配置，

// tailwind.config.js
module.exports = {
  theme: {
    gradients: theme => ({
      'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
      'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
      // ...
    })
  },
  variants: {
    gradients: ['responsive', 'hover'],
  },
  plugins: [
    require('./plugins/gradients')
  ],
}

提供默認選項

要為您的插件提供默認的 theme 和 variants 選項，請向 Tailwind 的 plugin 函式傳遞包含默認值的第二個引數，，

// ./plugins/gradients.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, e, theme, variants }) {
  // ...
}, {
  theme: {
    gradients: theme => ({
      'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
      'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
      // ...
    })
  },
  variants: {
    gradients: ['responsive', 'hover'],
  }
})

這個物件只是另一個 Tailwind 配置物件，并具有與 tailwind.config.js 中使用的配置物件相同的所有屬性和功能，

通過以這種方式提供您的默認值，最終用戶將能夠 覆寫 和 擴展 您的默認值，就像他們可以覆寫和擴展 Tailwind 的內置樣式一樣，

CSS-in-JS 語法

每一個 addUtilities、addComponents 和 addBase 都期望 CSS 規則寫成 JavaScript 物件，Tailwind 使用的語法，您可能會從 CSS-in-JS 庫中識別出來，如 Emotion，并由 postcss-js 提供支持，

考慮這個簡單的CSS規則：

.card {
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

將其翻譯成 CSS-in-JS 物件，就像這樣：

addComponents({
  '.card': {
    'background-color': '#fff',
    'border-radius': '.25rem',
    'box-shadow': '0 2px 4px rgba(0,0,0,0.2)',
  }
})

為方便起見，屬性名也可以用 camelCase 書寫，并會自動翻譯成 dash-case：

addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
  }
})

也支持嵌套（由 postcss-nested 提供支持），使用您可能熟悉的 Sass 或 Less 的相同語法，

addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
    '&:hover': {
      boxShadow: '0 10px 15px rgba(0,0,0,0.2)',
    },
    '@media (min-width: 500px)': {
      borderRadius: '.5rem',
    }
  }
})

同一物件中可以定義多個規則：

addComponents({
  '.btn': {
    padding: '.5rem 1rem',
    borderRadius: '.25rem',
    fontWeight: '600',
  },
  '.btn-blue': {
    backgroundColor: '#3490dc',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#2779bd'
    },
  },
  '.btn-red': {
    backgroundColor: '#e3342f',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#cc1f1a'
    },
  },
})

…或者作為一個物件陣列，以備您需要重復使用同一個鍵：

addComponents([
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
])

Adding variants

增加變體

addVariant 函式允許您注冊自己的自定義 變體，這些變體可以像內置的 hover、hover、hover 等變體一樣使用，

要添加一個新的變數，呼叫 addVariant 函式，傳入您的自定義變數的名稱，以及一個回呼，根據需要修改受影響的 CSS 規則，

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`disabled${separator}${className}`)}:disabled`
        })
      })
    })
  ]
}

回呼收到的物件可以被反構為以下部分：

• modifySelectors, a helper function to simplify adding basic variants
• separator, the user’s configured separator string
• container, a PostCSS Container containing all of the rules the variant is being applied to, for creating complex variants

Basic variants

基本變體

如果您想添加一個簡單的變數，只需要改變選擇器，使用 modifySelectors 助手，

modifySelectors 助手接受一個函式，該函式接收一個物件，該物件可以被重構為以下部分：

• selector, the complete unmodified selector for the current rule
• className, the class name of the current rule with the leading dot removed

您傳遞給 modifySelectors 的函式應該簡單地回傳修改后的選擇器，

例如，一個 first-child 的變體插件可以這樣寫：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('first-child', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-child${separator}${className}`)}:first-child`
        })
      })
    })
  ]
}

復雜變體

如果您需要做的事情不僅僅是簡單地修改選擇器（比如改變實際的規則宣告，或者將規則包裝在另一個 at-rule 中），您將需要使用 container 實體，

使用 container 實體，您可以在給定的模塊或 @variants 塊中遍歷所有的規則，并使用標準的 PostCSS API 隨意操作它們，

例如，該插件通過在類前加上感嘆號，并將每個宣告修改為 important，為每個受影響的功能創建一個 important 版本，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${rule.selector.slice(1)}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    })
  ]
}

這個插件將容器內的所有規則，用 @supports (display: grid) at-rule 包裝起來，并在每個規則前加上 supports-grid ，

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e, postcss }) {
      addVariant('supports-grid', ({ container, separator }) => {
        const supportsRule = postcss.atRule({ name: 'supports', params: '(display: grid)' })
        supportsRule.append(container.nodes)
        container.append(supportsRule)
        supportsRule.walkRules(rule => {
          rule.selector = `.${e(`supports-grid${separator}${rule.selector.slice(1)}`)}`
        })
      })
    })
  ]
}

要了解更多關于直接使用 PostCSS 的資訊，請查看 PostCSS API 檔案，

Using custom variants

使用自定義變體

使用自定義變體與使用 Tailwind 的內置變體沒有什么不同，

要使定制的變體與 Tailwind 的核心插件一起使用，將它們添加到您的組態檔的 variants 部分，

// tailwind.config.js
modules.exports = {
  variants: {
    borderWidths: ['responsive', 'hover', 'focus', 'first-child', 'disabled'],
  }
}

要在您自己的CSS中使自定義變體和自定義功能類一起使用，請使用 variants at-rule，

@variants hover, first-child {
  .bg-cover-image {
    background-image: url('/path/to/image.jpg');
  }
}

2. 預設（presets）

創建自己的可復用配置預設，

默認情況下，您的 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')
  ],
  // ...
}