如何解决Tailwind CSS BackgroundImage对我不起作用
全部
我正在尝试使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',margin: {
'7': '1.75rem','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','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代码来解决,但我想使用自己的解决方案)
谢谢大家!
解决方法
tailwindcss的背景图像功能已在1.7.0版中发布。
我在开发环境中测试了您的代码,但由于我还具有较早版本的tailwindcss,因此该代码也不起作用。升级到最新版本后,您的代码可以正常工作。
,你需要在你的配置中添加(主题)道具 像这样:
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')",
希望它有效:)
,编辑您的 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。