向Tailwind插件传递多参数：扩展渐变边框背景为渐变样式

我写了一个Tailwind插件，用来给元素添加渐变边框样式：

plugin(function ({matchUtilities, theme, }) {
  matchUtilities(
    {
      'border-gradient-primary': (background) => ({
        'border': '1px solid transparent',
        'background-image': `linear-gradient(to right, ${background}, ${background}),linear-gradient(94deg, rgba(149, 78, 245, 0.6) 0.69%, rgba(166, 118, 171, 0.6) 100%)`,
        'background-clip': 'padding-box, border-box',
        'background-origin': 'padding-box, border-box'
      }),
    },
    {
      values: Object.assign(
        theme('borderGradBg1', {}), 
        {
          'bg-gray-scale-500': myTheme["gray-scale"]["500"],
          'bg-primary-scale-600': myTheme["primary-scale"]["600"], 
          'bg-primary-scale-800': myTheme["primary-scale"]["800"],
        }
      )
    }
  )
})

这个插件通过双层background-image实现渐变边框：内层是单一颜色的元素主体背景，外层是固定的渐变边框。现在我想扩展它，让元素的主体背景也能支持渐变，最终实现这样的background-image效果：

linear-gradient(to right, ${background1}, ${background2}),linear-gradient(94deg, rgba(149, 78, 245, 0.6) 0.69%, rgba(166, 118, 171, 0.6) 100%)

修改后的插件实现 #

要支持背景渐变，我们可以调整工具类的参数处理逻辑，让它能接收两个颜色值组成的渐变定义，具体修改如下：

plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      'border-gradient-primary': ([startBg, endBg]) => ({
        border: '1px solid transparent',
        backgroundImage: `linear-gradient(to right, ${startBg}, ${endBg}), linear-gradient(94deg, rgba(149, 78, 245, 0.6) 0.69%, rgba(166, 118, 171, 0.6) 100%)`,
        backgroundClip: 'padding-box, border-box',
        backgroundOrigin: 'padding-box, border-box'
      }),
    },
    {
      values: Object.assign(
        theme('borderGradBgs', {}),
        {
          // 预定义渐变组合示例
          'gray-to-primary': `${myTheme["gray-scale"]["500"]}, ${myTheme["primary-scale"]["600"]}`,
          'primary-dark-to-light': `${myTheme["primary-scale"]["800"]}, ${myTheme["primary-scale"]["600"]}`
        }
      ),
      // 支持自定义任意颜色值
      supportsArbitraryValues: true
    }
  )
})

关键修改说明 #

• 将工具类的参数改为数组解构([startBg, endBg])，可以直接接收两个颜色值组成的渐变规则
• 在values中添加预定义的渐变组合，用逗号分隔起始和结束颜色
• 开启supportsArbitraryValues: true，允许直接在类名中传入自定义渐变颜色

使用示例 #

1. 使用预定义渐变：

<div class="border-gradient-primary-gray-to-primary w-64 h-32"></div>

2. 使用自定义任意值渐变：

<div class="border-gradient-primary-[#f0f0f0,#e0e0e0] w-64 h-32"></div>

内容的提问来源于stack exchange，提问作者Shaniqwa