如何为带有渐变的背景创建一个tailwindcss插件？答案

【问题标题】：how to create a tailwindcss plugin for background with gradient?如何为带有渐变的背景创建一个tailwindcss插件？
【发布时间】：2021-02-17 00:26:00
【问题描述】：

我是 tailwind 的新手，我无法为不透明的背景图像创建此插件。

const plugin = require('tailwindcss/plugin');

module.exports = plugin.withOptions(() => {
    return function({addUtilities}) {
        addUtilities({
            '.bg-img-with-opacity': {
                'background': 'linear-gradient(
                    rgba(43, 108, 176, 0.9),
                    rgba(43, 108, 176, 0.9)
                ),
                url('../images/background-1.jpg')',
            }
        })
    }
})

这里的问题是我使用了两个带逗号的值，并且它不允许用于对象。提前致谢。

【问题讨论】：

发生这种情况是因为 url 引号没有被转义吗？如果将url('../images/background-1.jpg') 更改为url("../images/background-1.jpg")，还会出现这种情况吗？
是的，还是同样的问题

标签： tailwind-css

【解决方案1】：

我认为如果你使用反引号 ` 来包装你的多行 background 规则，一切都应该可以正常工作：

const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(() => {
  return function ({addUtilities}) {
    addUtilities({
      '.bg-img-with-opacity': {
        'background': `linear-gradient(
          rgba(43, 108, 176, 0.9),
          rgba(43, 108, 176, 0.9)
        ),
        url(../images/background-1.jpg)`,
      }
    })
  }
})

这是一个demo 演示，以防万一。

【讨论】：

谢谢，伙计，这确实有效。为什么我没想到呢？