How to solve Error: tailwindcss/no-contradicting-classname?

Question

The classes have the following properties bg-[url('/images/img.webp')] bg-right I need to align the background picture to the right edge, and I get an error when checking with a linter

Error: Classnames bg-[url('/images/img.webp')], bg-right are conflicting!  tailwindcss/no-contradicting-classname

Is there any way to bypass or correct this error?

Answer 1

Using this strategy to your property classnames.

const styles = [
  "bg-[url('/images/img.webp')]",
  "bg-right",
].join(" ");

Then put in your react className property.

<div className={styles}>Hello World</div>

Full Code

const styles = [
  "bg-[url('/images/img.webp')]",
  "bg-right",
].join(" ");

const SomeComponent = () => {
  return <div className={styles}>Hello World</div>
}