Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Custom Tailwind background image works for a specific image, not for the others

I use React, NextJS and Tailwind.

I want to use some images as background for some cards elements.
I first store the images names in an array.

const symbols = ['boat_2.png', 'boat.png', 'tortue.jpg', 'surf.jpg'];

Then I map the array and pass the name in the child elements.

                    {symbols.map((symbol, index) => (
                        <ChildElement
                            key = {index}
                            symbol = {symbol}
                        />
                    ))}

In the child element I use the name to fit the the Tailwind syntax : bg-[url(‘imagepath’)] 

    var bgImg = "bg-[url('../public/" + symbol + "')]"
    console.log(bgImg)

The path is correctly displayed in the console.
Finally I use the bgImg variable in the className for my div element.

    return (
        <div
            className={`${bgImg} bg-cover bg-center bg-no-repeat aspect-[5/7] border-2 rounded-xl border-black`}
        >
        </div>
    )

The problem is only the boat.png is working.
All others images are not displayed.

I tried to access my images (through localhost:3000/surf.jpg for exemple) and it works.

I restart my browser, visual studio. Nothing worked.

I though it could be the image format. So I copied my boat.png in the folder and renamed it boat_2.png.
boat.png still works but boat_2.png doesnt.

I tried to make custom backgroundImage in the tailwind.config.ts like

      backgroundImage: {
        'surf': "url('../public/surf.jpg')",
      },

This last method (using className = bg-surf) worked. But I want to understand why the first method works only for le boat.png image.
Since it’s a one-time use background images I dont want to specify them in the tailwind.config.ts and would like to fix the first method. (Maybe I’m wrong and should use this way)

Thanks for any advices

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Although using the style property seems to work fine I stick with the tailwind className.

    Based on the documentation I ended up doing this :

        const imgVariants: Record<string, string> = {
        tortue: 'bg-tortue',
        surf: 'bg-surf',
        boat: 'bg-boat',
    }

    return (
        <div
            className={`${imgVariants[symbol]} bg-cover bg-center bg-no-repeat aspect-[5/7] border-2 rounded-xl border-black`}
            onClick={onClickEvent}
        >
        </div>
    )

    bg-* declared on imgVariants are from the tailwind.config.ts I used the tailwind.config.ts to avoid using relative pathname.


  2. 0

    This is most likely postcss thats not got the classes included so they are being striped out when your app builds. I think you can try whitelisting those, or by whitelisting a regex of bg-*, which might not work.

    But if all else fails you can just use css directly in the div like so:

    <div style={{ backgroundImage: 'url(...)'}} />

    Then style the rest of it using tailwind.

    Login or Signup to reply.
  3. 0

    Tailwind cannot handle dynamically concatenated strings to form a single class name, as the full class name does not appear in the source code.

    See the documentation:

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

    You can use an inline style instead.

    <div className={yourClassName}
     style={{backgroundImage: "url('../public/" + symbol + "')"}}>
    { /* children */ }
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search