How can i dynamically change images as Background in TailwindCSS?-CodePudding

I want to make a carousel, where the background is changing, i don't want to use the <img/> tag! I set the value as described in the documentation: https://tailwindcss.com/docs/background-image#arbitrary-values

My Code:

import React from 'react';

type CarouselProps = {
  img: string;
};

const Carousel = ({ img }: CarouselProps) => {
  return (
    <div
      className={`col-span-full bg-[url(${img})] bg-cover grid grid-cols-12 gap-6`}
    > ...
    </div>
);
};

When i set the String i pass to the Component hardcoded it works but when i use curly Braces and $ it doesn't. In addition i don't want to define my Background-Images in the tailwind.conf.js

The Error:

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5]
.use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!
./node_modules/source-map-loader/dist/cjs.js!./src/index.css) 9:36-70

CodePudding user response：

i don't want to define my Background-Images in the tailwind.conf.js

Well you have to. What you're trying to do isn't supported.

The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.

so tailwind has no idea what your React code actually means. So it's simply not going to work.

Tailwind does not support dynamic class names:

Don't construct class names dynamically
<div ></div>

you should customise your theme to include the image url:

You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
        'footer-texture': "url('/img/footer-texture.png')",
      }
    }
  }
}

CodePudding user response：

The solution is to use the style attribute. Thanks for helping :)

<div
      className="col-span-full bg- bg-cover grid grid-cols-12 gap-6"
      style={{
        backgroundImage: `url(${img})`,
      }}
    >