极客观点
项目管理
HarmonyOS
全部，
我正在尝试使 tailwinds backgroundImage 解决方案工作，并且我在这里或在 github 上找到了许多其他 tailwindcss 问题的帮助，但不是为了这个。这不是一项复杂的任务，但仍然行不通。因此，在文档中，我想创建 2 个简单的背景图像以用于多个视图大小。文档 https://tailwindcss.com/docs/background-image “默认情况下，仅为背景图像实用程序生成响应变体。”这意味着，无需对变体进行任何进一步的配置，我应该能够将其用于此目的。
这是我的 tailwind.conf.js 的样子（重要部分在最后）：
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
只是为了确保我包含了全部内容。这就是 html 的样子：
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
正如我所说，没有什么特别的，“npm run dev”在没有任何错误的情况下完成……但是如果我检查元素，我看不到与 css 中任何背景参数相关的任何内容。即使是文档中的示例也不起作用，它应该提供一个渐变块。我不认为这是重要的信息，但我在 laravel 中使用了顺风。
任何人都可以帮助我吗？我很绝望，我试图让它工作好几天:(我可以在我的 sass 文件中使用 css 代码来解决问题，但我想使用 tailwinds 自己的解决方案）
谢谢大家！
原文由 Repag 发布，翻译遵循 CC BY-SA 4.0 许可协议
tailwindcss 的背景图片功能已在 1.7.0 版本中发布。
我在我的开发环境中测试了你的代码，它也没有工作，因为我也有一个早期版本的 tailwindcss。升级到最新版本后，您的代码运行良好。