Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Compound background-image JIT not working

See original GitHub issue

What version of Tailwind CSS are you using?

tailwindcss@3.0.24

Operating System:
      Platform: linux
      Arch: x64
      Version: #44-Ubuntu SMP Thu Mar 24 15:35:05 UTC 2022
    Binaries:
      Node: 14.18.1
      npm: 8.6.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 18.0.0
      react-dom: 18.0.0

What browser are you using?

Firefox

Doing compound bg-[] for background images is not working. e.g.

bg-[url('/media/left-side-bar.png'),linear-gradient(to_right,_#e2d9d4,_#f3eeeb)]

Either of those work by themselves works, but when it is joined it is not working.

When I hover over it the CSS class it says it will create is correct.

.bg-\[url\(\'\/media\/left-side-bar\.png\'\)\2c _linear-gradient\(to_right\2c _\#e2d9d4\2c _\#f3eeeb\)\] {
    background-image: url('/media/left-side-bar.png'), linear-gradient(to right, #e2d9d4, #f3eeeb);
}

https://play.tailwindcss.com/5sCBtDy3RZ

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

1reaction

aggreggatorcommented, Apr 21, 2022

Maybe there is a bug using single quotes. (the selector is just not valid) Here is a workaround without quotes and also omitting the underscore(space) before linear-gradient: https://play.tailwindcss.com/hFVoqe2TPr

0reactions

DanielBailey-webcommented, May 7, 2022

@thecrypticace I am not getting it to work. Just for reference, I am using:

yarn create next-app --example with-tailwindcss with-tailwindcss-app;
yarn add tailwindcss@insiders;
yarn dev;

bg-[var(--primary-color)]

Top Results From Across the Web

How to fix CSS background-image not working | HTML/CSS

If the image isn't showing up, but you aren't getting any 404 errors, go into the code inspector and check the element itself....

Tailwind CSS background Image not Working with @apply

What is the error? Is the url to the image wrong when you load the css in your browser? Do you have JIT...

how to add an image in 2009 [Archive] - AUGI Forums

My problem is how do i get the image, or decal, to be included in a rendering? ... The import you background image...

How to Manage Capital Allocations - dummies

The ultimate goal is JIT inventory management; JIT stands for just-in-time. ... Each phase has its own costs and valuations; JIT works to...

Danny Pennington - Position In.. - JIT Silicones Plus | ZoomInfo

JIT Silicones Plus offers the highest quality products including Silicone Compounds, Silicone Fluids, both Silicone and NON-Silicone Greases, RTV Silicones ...