閱讀(1.7k) 書簽贊(0) 我要糾錯

Tailwind CSS 插件

2022-08-08 10:11 更新

插件

使用可復(fù)用的第三方插件擴(kuò)展 Tailwind。

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

要開始您的第一個插件，先從 ?tailwindcss/plugin? 導(dǎo)入 Tailwind 的 ?plugin ?函數(shù)。然后在您的 ?plugins ?數(shù)組中，調(diào)用這個函數(shù)，用一個匿名函數(shù)作為其第一個參數(shù)。

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

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

插件函數(shù)接收一個單一的對象參數(shù)，可以 destructured 成幾個幫助函數(shù)。

?addUtilities()?, 用于注冊新的實用程序樣式(for registering new utility styles)
?addComponents()?, 用于注冊新的組件樣式for registering new component styles)
?addBase()?, 用于注冊新的基本樣式(for registering new base styles)
?addVariant()?, 用于注冊自定義變體(for registering custom variants)
?e()?, 用于轉(zhuǎn)義用于類名的字符串(for escaping strings meant to be used in class names)
?prefix()?, 用于手動將用戶配置的前綴應(yīng)用于選擇器的某些部分(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()?, 用于在用戶的 Tailwind 配置中查找值(for looking up values in the user’s Tailwind configuration)
?postcss?, 用于直接使用 PostCSS 進(jìn)行低級操作(for doing low-level manipulation with PostCSS directly)

官方插件

我們已經(jīng)開發(fā)了一些官方插件用于流行的功能，由于某種原因，這些插件還不屬于核心。

可以通過 npm 安裝插件，然后將它們添加到您的 ?tailwind.config.js? 文件中，從而將它們添加到您的項目中：

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

Typography

?@tailwindcss/typography? 插件添加了一組 ?prose ?類，可用于將合理的排版樣式快速添加到來自 markdown 或 CMS 數(shù)據(jù)庫等來源的內(nèi)容塊。

<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>

了解有關(guān)typography插件的更多信息

Forms

?@tailwindcss/forms? 插件添加了一個有主見的表單重置層，可以更輕松地使用實用程序類設(shè)置表單元素的樣式。

<!-- You can actually customize padding on a select element: -->
<select class="px-4 py-3 rounded-full">
  <!-- ... -->
</select>

<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />

了解有關(guān)forms插件的更多信息

Line-clamp

?@tailwindcss/line-clamp? 插件添加了 ?line-clamp-{lines}? 類，可用于將文本截斷為固定行數(shù)。

<p class="line-clamp-3 md:line-clamp-none">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis
  dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate
  possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

了解有關(guān)line-clamp插件的更多信息

Aspect ratio

?@tailwindcss/aspect-ratio? 插件添加了 ?aspect-w-{n}? 和 ?aspect-h-{n}? 類，它們可以組合起來為元素提供固定的寬高比。

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" rel="external nofollow"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

了解有關(guān)aspect ratio插件的更多信息

Adding utilities

?addUtilities ?函數(shù)允許您在 Tailwind 的 ?utilities ?層注冊新的樣式。

插件功能類的輸出順序是按照其注冊的順序，在內(nèi)置的功能類之后，所以如果一個插件的作用目標(biāo)是任何一個與內(nèi)置功能類相同的屬性，插件功能類將優(yōu)先。

要從插件中添加新的功能類，調(diào)用 ?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 參考

默認(rèn)情況下，插件功能類會自動遵守用戶的 ?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 ?傳遞一個選項對象作為第二個參數(shù)來選擇不使用這種行為。

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

如果您只需要指定變體，而不需要選擇不使用默認(rèn)的前綴或 important 選項，您也可以直接將變體數(shù)組作為第二個參數(shù)傳遞。

// 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()? 函數(shù)來獲取他們配置的變體。

// 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 ?函數(shù)允許您在 Tailwind 的 ?components ?層注冊新的樣式。

用它來添加更個性化、更復(fù)雜的類，比如按鈕、表單控件、警告等；就是您在其他框架中經(jīng)?？吹降哪赡苄枰褂霉δ茴惛采w的那種預(yù)建組件。

要從插件中添加新的組件樣式，調(diào)用 ?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 參考

默認(rèn)情況下，組件類自動遵守用戶的 ?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-red {
  background-color: #e3342f;
  color: #fff;
}
.tw-btn-red: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)
    })
  ]
}

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

// 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 對象作為第二個參數(shù)給 ?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'],
      })
    })
  ]
}

如果您只需要指定變體，而不需要選擇不使用默認(rèn)的前綴或 important 選項，您也可以直接將變體數(shù)組作為第二個參數(shù)傳遞。

// 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()? 函數(shù)來獲取他們配置的變體。

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

添加基礎(chǔ)樣式

?addBase ?函數(shù)允許您在 Tailwind 的 ?base ?層注冊新的樣式。

使用它來添加諸如基本的排版樣式、個性化的全局重置或 ?@font-face? 規(guī)則。

要從插件中添加新的基礎(chǔ)樣式，調(diào)用 ?addBase?，使用 CSS-in-JS 語法 傳遞您的樣式。

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

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

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

轉(zhuǎn)義類名

如果您的插件生成的類中包含用戶提供的字符串，您可以使用 ?e? 函數(shù)來轉(zhuǎn)義這些類名，以確保非標(biāo)準(zhǔn)字符被正確地自動處理。

例如，這個插件生成了一組 ?.rotate-{angle}? 功能類，其中 ?{angle}? 是用戶提供的字符串。?e? 函數(shù)用于轉(zhuǎn)義連接的類名，以確保像 ?.rotate-1/4? 這樣的類能按預(yù)期工作。

// 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, theme, e }) {
      const rotateUtilities = _.map(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);
}

注意只轉(zhuǎn)義您真正想轉(zhuǎn)義的內(nèi)容；不要在類名中傳遞前導(dǎo)的 ?.? 或在 ?:hover? 或 ?:focus? 等偽類的開頭傳遞 ?:?，否則這些字符將被轉(zhuǎn)義。

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

// 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'

手動給選擇器加前綴

如果您正在寫一些復(fù)雜的東西，您只想給某些類加前綴，您可以使用 ?prefix ?函數(shù)來精細(xì)控制何時應(yīng)用用戶配置的前綴。

例如，如果您正在創(chuàng)建一個插件，以便在一組內(nèi)部項目中重復(fù)使用，在其選擇器中包含現(xiàn)有的類，您可能只想給新的類加上前綴。

// 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 ?函數(shù)會給選擇器中的所有類加前綴，而忽略不是類的選擇器，所以傳遞像這樣復(fù)雜的選擇器是完全安全的。

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 ?函數(shù)允許您使用點符號從用戶的 Tailwind 配置中獲取一個值，如果該路徑不存在，則提供一個默認(rèn)值。

例如，這個簡化版的內(nèi)置容器插件使用 ?theme ?函數(shù)來獲取用戶配置的斷點。

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

如果你想引用用戶的 ?variables ?配置，建議你使用 ?variables()? 函數(shù)而不是 config 函數(shù)。

不要使用 config 函數(shù)來查找變體

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

使用 variants 函數(shù)代替

addUtilities(newUtilities, variants('customPlugin'))

由于 ?variants ?可以簡單地成為一個全局的變體列表，為整個項目中的每一個插件進(jìn)行配置，所以使用 ?variants()? 函數(shù)可以讓您很容易地遵從用戶的配置，而不是自己重新實現(xiàn)這個邏輯。

// 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')
      // => ['responsive', 'hover', 'focus']
    })
  ]
}

暴露選項

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

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

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

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

提供默認(rèn)選項

要為您的插件提供默認(rèn)的 ?theme ?和 ?variants ?選項，請向 Tailwind 的 ?plugin ?函數(shù)傳遞包含默認(rèn)值的第二個參數(shù)，。

// ./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? 中使用的配置對象相同的所有屬性和功能。

通過以這種方式提供您的默認(rèn)值，最終用戶將能夠覆蓋和 擴(kuò)展 您的默認(rèn)值，就像他們可以覆蓋和擴(kuò)展 Tailwind 的內(nèi)置樣式一樣。

公開高級配置選項

有時，以不真正屬于 ?theme ?或 ?variants ?的方式配置插件是有意義的，例如您可能希望用戶能夠自定義插件使用的類名。

對于這種情況，您可以使用 ?plugin.withOptions? 來定義一個可以使用配置對象調(diào)用的插件。此 API 類似于常規(guī)插件 API，除了每個參數(shù)應(yīng)該是一個函數(shù)，它接收用戶的選項并返回您通常使用常規(guī) API 傳入的值：

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

module.exports = plugin.withOptions(function (options) {
  return function({ addUtilities, e, theme, variants }) {
    const classPrefix = options.classPrefix ?? 'bg-gradient'
    const gradients = theme('gradients', {})
    const gradientVariants = variants('gradients', [])

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

    addUtilities(utilities, gradientVariants)
  }
}, function (options) {
  return {
    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'],
    }
  }
})

用戶在他們的插件配置中注冊你的插件時，會調(diào)用你的插件并傳遞他們的選項。

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  variants: {
    // ...
  },
  plugins: [
    require('./plugins/gradients')({
      classPrefix: 'bg-grad'
    })
  ],
}

如果不需要傳入任何自定義選項，用戶也可以注冊以這種方式正常創(chuàng)建的插件而無需調(diào)用它們：

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  variants: {
    // ...
  },
  plugins: [
    require('./plugins/gradients')
  ],
}

CSS-in-JS 語法

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

考慮這個簡單的CSS規(guī)則：

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

同一對象中可以定義多個規(guī)則：

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

或者作為一個對象數(shù)組，以備您需要重復(fù)使用同一個鍵：

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

增加變體

?addVariant ?函數(shù)允許您注冊自己的自定義變體，這些變體可以像內(nèi)置的 hover、hover、hover 等變體一樣使用。

要添加一個新的變量，調(diào)用 ?addVariant ?函數(shù)，傳入您的自定義變量的名稱，以及一個回調(diào)，根據(jù)需要修改受影響的 CSS 規(guī)則。

const plugin = require('tailwindcss/plugin')

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

回調(diào)收到的對象可以被反構(gòu)為以下部分：

modifySelectors, 用于簡化添加基本變體的輔助函數(shù)(a helper function to simplify adding basic variants)
separator,用戶配置的分隔符字符串(the user’s configured separator string)
container, 一個 PostCSS 容器，包含應(yīng)用變體的所有規(guī)則，用于創(chuàng)建復(fù)雜的變體(a PostCSS Container containing all of the rules the variant is being applied to, for creating complex variants)

基本變體

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

?modifySelectors ?助手接受一個函數(shù)，該函數(shù)接收一個對象，該對象可以被重構(gòu)為以下部分：

?selector?, 當(dāng)前規(guī)則的完整未修改選擇器(the complete unmodified selector for the current rule)
?className?, 當(dāng)前規(guī)則的類名，去掉了前導(dǎo)點(the class name of the current rule with the leading dot removed)

您傳遞給 ?modifySelectors ?的函數(shù)應(yīng)該簡單地返回修改后的選擇器。

例如，一個 ?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`
        })
      })
    })
  ]
}

復(fù)雜變體

如果您需要做的事情不僅僅是簡單地修改選擇器（比如改變實際的規(guī)則聲明，或者將規(guī)則包裝在另一個 at-rule 中），您將需要使用 ?container ?實例。

使用 ?container ?實例，您可以在給定的模塊或 ?@variants? 塊中遍歷所有的規(guī)則，并使用標(biāo)準(zhǔn)的 PostCSS API 隨意操作它們。

例如，該插件通過在類前加上感嘆號，并將每個聲明修改為 ?important?，為每個受影響的功能創(chuàng)建一個 ?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
          })
        })
      })
    })
  ]
}

這個插件將容器內(nèi)的所有規(guī)則，用 ?@supports (display: grid)? at-rule 包裝起來，并在每個規(guī)則前加上 ?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)}`
        })
      })
    })
  ]
}

要了解更多關(guān)于直接使用 PostCSS 的信息，請查看 PostCSS API 文檔。

使用自定義變體

使用自定義變體與使用 Tailwind 的內(nèi)置變體沒有什么不同。

要使定制的變體與 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');
  }
}

以上內(nèi)容是否對您有幫助：

← Tailwind CSS 變體

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

寫筆記

我要補(bǔ)充

Tailwind CSS 插件

插件

官方插件

Typography

Forms

Line-clamp

Aspect ratio

Adding utilities

前綴 和 important 參考

變體

增加組件

前綴 和 important 參考

變體

添加基礎(chǔ)樣式

轉(zhuǎn)義類名

手動給選擇器加前綴

引用用戶配置

不要使用 config 函數(shù)來查找變體

使用 variants 函數(shù)代替

暴露選項

提供默認(rèn)選項

公開高級配置選項

CSS-in-JS 語法

增加變體

基本變體

復(fù)雜變體

使用自定義變體

前綴和 important 參考

前綴和 important 參考