Tailwind css 背景图片对我不起作用
Posted
技术标签:
【中文标题】Tailwind css 背景图片对我不起作用【英文标题】:Tailwind css backgroundImage doesn't work for me 【发布时间】:2020-12-18 19:55:20 【问题描述】:所有,
我正在尝试使 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 自己的解决方案)
提前谢谢大家!
【问题讨论】:
你试过用relative path
代替url()
吗?
我试过了,但没有用。我认为无论图片的定义如何,我都应该看到带有某种图像路径的元素的 css 参数,如果路径不好,它将不起作用,但元素上的样式只有 element.style .w-24 width: 6rem; .h-24 height: 6rem; *, ::before, ::after box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e2e8f0; user agent stylesheet div display: block;
所以我错过了@ 987654327@
您使用的是哪个版本的 tailwindcss?
tailwindcss@1.6.2
@Repag 有问题。背景图像是 1.7.0 版的一项功能。您需要将 tailwindcss 更新到最新版本。我刚刚用 1.7.0 版本尝试了你的代码,它就像一个魅力
【参考方案1】:
如果您不想在tailwindcss.config.js
中扩展您的主题,并且想将背景图片直接添加到您的div
中,您可以尝试:
<div className="bg-[url('../public/assets/images/banner.svg')]">
这是让背景图像正常工作的最简单方法。
参考:Check under Arbitrary values heading
【讨论】:
这是顺风3【参考方案2】:我在 TailwindCSS 2.2.7 中遇到了这个问题我的问题是我的语法错误。
tailwindcss.config.js:
theme:
backgroundImage:
'pack-train': "url('../public/images/packTrain.jpg')",
,
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
'
和 "
很关键。出于某种原因,eslint 正在进入并在保存时“清理”这些字符,这使其无法正常工作。此外,../
引导 url
也很关键。
【讨论】:
谢谢,添加 ../ 路径对我有用【参考方案3】:编辑您的 tailwind.config.js
module.exports =
theme:
extend:
backgroundImage: theme => (
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
)
为您的图像添加名称和 URL 并使用它。
例如bg-hero-pattern
【讨论】:
【参考方案4】:你需要在你的配置中添加(主题)道具 像这样:
backgroundImage: (theme) =>
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
,
或像这样带有“../”的网址
backgroundImage: (theme) =>
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
,
希望它有效:)
【讨论】:
【参考方案5】:tailwindcss 的背景图片功能已在 1.7.0 版本中发布。
我在我的开发环境中测试了你的代码,但它也没有工作,因为我也有一个早期版本的 tailwindcss。升级到最新版本后,您的代码运行良好。
【讨论】:
哇,我以为我使用的是最新版本,但似乎 v1.7 于 8 月 18 日发布,那是我最初安装的时间。我会尝试升级和检查,并回复您 升级顺风之后:D所以试图让它再次工作...... 非常感谢,帮了大忙,现在可以了。老实说,“npm install tailwindcss@^1.0 --save-dev”并没有太大帮助,因为它弄乱了我的顺风。首先是“npm uninstall tailwindcss”,然后是“npm install tailwindcss”,现在我有了新版本,backgroundImage 就像一个魅力! :)以上是关于Tailwind css 背景图片对我不起作用的主要内容,如果未能解决你的问题,请参考以下文章
带有 Tailwind CSS 的 Django-Tinymce
Tailwind css translate-y-full 不起作用