Tailwind CSS BackgroundImage对我不起作用 [英] Tailwind css backgroundImage doesn't work for me
问题描述
全部
我正在尝试使tailwinds backgroundImage解决方案正常工作,并且在这里或在github上找到了许多其他tailwindcss问题的帮助,但并非为此.这不是一项复杂的任务,但是仍然行不通.因此,正如在文档中一样,我想创建2个简单的背景图像以用于多个视图大小.它在文档 https://tailwindcss.com/docs/background-image 中声明;默认情况下,仅为背景图像实用程序生成响应变体.这意味着,无需对变体进行任何进一步配置,我就可以为此目的使用它.
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this. It's not a complicated task, but still doesn't work. So as in the documentation, I want to create 2 simple background image to use for multiple viewsize. It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities." It means, without any further configuration on variants, I should be able to use it for this purpose.
这是我的tailwind.conf.js的样子(重要的部分在最后):
Here is how my tailwind.conf.js looks like (important part is at the end):
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的样子:
Just to make sure I included the full content. And this is how the html looks like:
<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中使用了顺风.
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block. I don't think it's important info, but I use tailwind with laravel.
有人可以帮我吗?我很拼命,我想让它工作几天:(我可以在我的sass文件中使用CSS代码来解决,但我想使用自己的解决方案)
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
谢谢大家!
推荐答案
tailwindcss的背景图像功能已在1.7.0版中发布.
The background image functionality of tailwindcss has been released in version 1.7.0.
我在开发环境中测试了您的代码,但由于我还具有较早版本的tailwindcss,因此该代码也不起作用.升级到最新版本后,您的代码可以正常工作.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
这篇关于Tailwind CSS BackgroundImage对我不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!