[英]Tailwind css backgroundImage doesn't work for me
all,全部,
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.我正在尝试使 tailwinds backgroundImage 解决方案起作用,我在这里或 github 上找到了许多其他 tailwindcss 问题的帮助,但不是这个。 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.因此,在文档中,我想创建 2 个简单的背景图像以用于多个视图大小。 It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."它在文档https://tailwindcss.com/docs/background-image中说明“默认情况下,仅为背景图像实用程序生成响应变体。” It means, without any further configuration on variants, I should be able to use it for this purpose.这意味着,无需对变体进行任何进一步配置,我应该能够将其用于此目的。
Here is how my tailwind.conf.js looks like (important part is at the end):这是我的 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: []
}
Just to make sure I included the full content.只是为了确保我包含了全部内容。 And this is how the html looks like:这就是 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>
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.正如我所说,没有什么特别的,“npm run dev”完成时没有任何错误......但是如果我检查元素,我看不到与 css 中任何背景参数相关的任何内容。即使文档中的示例也不起作用,这应该必须提供一个渐变块。 I don't think it's important info, but I use tailwind with laravel.我认为这不是重要信息,但我使用 tailwind 和 laravel。
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)我很绝望,我试图让它工作好几天:(我可以在我的 sass 文件中使用 css 代码来解决问题,但我想使用 tailwinds 自己的解决方案)
Thank you all in advance!谢谢大家!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.我在 TailwindCSS 2.2.7 中遇到了这个问题 我的问题是我的语法错误。
tailwindcss.config.js: tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js应用程序.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The '
and "
are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../
leading the url
was also critical. '
和"
很关键。出于某种原因,eslint 进入并在保存时“清理”这些字符,这使其无法正常工作。此外,引导url
的../
也很关键。
If you don't want to extend your theme in the tailwindcss.config.js
and want to add the background image directly to your div
you can try:如果您不想在tailwindcss.config.js
中扩展您的主题并且想将背景图片直接添加到您的div
中,您可以尝试:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.这是使背景图像正常工作的最简单方法。
Reference: Check under Arbitrary values heading参考: 在任意值标题下检查
The background image functionality of tailwindcss has been released in version 1.7.0. tailwindcss 的背景图片功能已在 1.7.0 版本中发布。
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss.我在我的开发环境中测试了你的代码,它也没有工作,因为我也有一个早期版本的 tailwindcss。 After upgrading to the latest version, your code has worked fine.升级到最新版本后,您的代码运行良好。
editing your tailwind.config.js编辑你的 tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.为您的图像添加名称和 URL 并使用它。 example bg-hero-pattern
示例bg-hero-pattern
u need to add (theme) props to your config like this:您需要将(主题)道具添加到您的配置中,如下所示:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this或带有“../”的网址,像这样
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)希望它有效:)
In ^3.1.8 version image path was not working.在 ^3.1.8 版本中,图像路径不起作用。 Then I just put "../" instead of "./" and it worked.然后我只输入“../”而不是“./”,它就起作用了。 Example:例子:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed我必须指定要显示的图像的高度
<div className="h-screen bg-hero"/>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},}, module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets /images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse" class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.