Background image with tailwind

[ShaungBhone]

The tailwind background image is not shown on my web page. I'm using tailwind bg-[url] with laravel vite asset. The image is not working.

<section class="bg-[url('{{ Vite::image('hero.jpg') }}')] bg-cover bg-no-repeat bg-blend-multiply">

So, I changed it like this. It's working.

<section style="background-image: url('{{ Vite::image('hero.jpg') }}')"

[wongjn]

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

[abr4xas]

@wongjn ok, but what does your response have to do with the question? I'm having the same problem right now, and honestly, I can't find the similarity between what you're saying and how to solve it.

My issue:

I'm working with laravel and I have something like this:

<div class="bg-[url('{{ $tour->getFirstMediaUrl('featured') }}')]"></div>

<div class="bg-[url('https://cdn.somedomain.com/content/934/01J3JRM1RAKS41GZQK81WC682E.jpg')]"></div>

And even though I get the URL of my image, it doesn't display...

[wongjn]

My response quotes a guideline highlighted in the documentation that is violated in the OP. This violation of the guideline is what was causing the unexpected behavior.

This is the same as your given case. You are constructing a class name dynamically, and thus it does not work.

[abr4xas]

The documentation says that arbitrary values can be used (https://tailwindcss.com/docs/background-image#arbitrary-values). If I need an arbitrary image that can be uploaded by my user, does that mean I can't use it? :/

[wongjn]

You can:

<div class="bg-[--image]" style="--image: url('{{ $tour->getFirstMediaUrl('featured') }}')"></div>

But you might as well then do:

<div style="background-image: url('{{ $tour->getFirstMediaUrl('featured') }}')"></div>

[abr4xas]

This is how I solve my issue:

<div
    class="bg-[image:var(--bg-image)]"
    style="
        --bg-image: url('{{ $tour->getFirstMediaUrl('featured') }}');
    "
>...</div>

Thanks @wongjn for your help 😃