Tailwind css backgroundImage 对我不起作用

Question

全部，

我正在尝试使 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 运行 dev”完成时没有任何错误...但是如果我检查元素，我看不到任何与 css 中的任何背景参数相关的内容.即使是文档中的示例也不起作用，它应该必须提供一个渐变块。我不认为这是重要的信息，但我将 tailwind 与 laravel.

一起使用

有人可以帮我吗？我很绝望，我试图让它工作几天:(我可以使用 sass 文件中的 css 代码来解决问题，但我想使用 tailwinds 自己的解决方案）

提前谢谢大家！

Answer 1

tailwindcss 的背景图片功能已在 1.7.0 版本中发布。

我在我的开发环境中测试了你的代码，但它也没有工作，因为我还有一个早期版本的 tailwindcss。升级到最新版本后，您的代码运行良好。

Answer 2

你需要在你的配置中添加（主题）道具像这样：

backgroundImage: (theme) => {
                'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
            },

或 url 像这样使用“../”

backgroundImage: (theme) => {
                'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
            },

希望有用:)

Answer 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

Answer 4

我在 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 的 ../ 也很关键。

Answer 5

如果您不想在 tailwindcss.config.js 中扩展您的主题并希望将背景图片直接添加到您的 div 您可以尝试：

<div className="bg-[url('../public/assets/images/banner.svg')]">

这是让背景图片正常工作的最简单方法。

参考：Check under Arbitrary values heading

Answer 6

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

Tailwind css backgroundImage 对我不起作用

Tailwind css backgroundImage doesn't work for me

css

background-image

tailwind-css