如何创建一个带有渐变背景的tailwindcss插件？
如何创建一个带有渐变背景的tailwindcss插件？
提问于 2020-11-04 18:01:05
我是顺风的新手，我不能为不透明的背景图像创建这个插件。
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')',
}
})
}
})
这里的问题是，我使用了两个带逗号的值，对象不允许这样做。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-05 19:10:27
我认为如果您使用反引号`来包装您的多行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演示，以防对您有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64677873
复制相关文章
相似问题
腾讯云开发者
