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

Question

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

这里的问题是我使用了两个带逗号的值，但对象不允许这样做。提前致谢。

Answer 1

我认为如果你使用反引号 ` 来包裹你的 multi-line 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 演示，希望对您有帮助。

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

how to create a tailwindcss plugin for background with gradient?

tailwind-css