my className={`...${getBackDropPach()}...`} not working

Question

i can't get backdrop_path URL from TMDB API. i use function getBackdropPath() to get image from TMDB API.

Althought my console.log(getBackdropPath(movie.backdrop_path)) led me to axactly URL images but it not working inside my className. I would be very grateful for your help !!

import React, {useEffect, useState} from "react"
import axios from "../api/axios"
import { useParams } from "react-router-dom"

function getPosterPath(poster_path) {
    return `https://www.themoviedb.org/t/p/w220_and_h330_face${poster_path}`;
  }

  function getBackdropPath(backdrop_path) {
    return `https://image.tmdb.org/t/p/original${backdrop_path}`;
  }

function MovieDetail() {
    const [movie, setMovie] = useState({});
    const { id } = useParams();

    useEffect(() => {
        const fetchMovie = async() => {
          const request = await axios.get(`/movie/${id}?api_key=f98a22858bd519d0862f0d61e33bb85b&language=en-US`)
          setMovie(request.data)
          
        }
        fetchMovie()
      },[id])

  
  return (
    <div>
        <div className={`bg-[url('${getBackdropPath(movie.backdrop_path)}')] bg-center bg-no-repeat bg-cover w-full h-[200px]`}></div>
        {console.log(getBackdropPath(movie.backdrop_path))}
        <div className=" w-full h-full flex flex-col items-center  z-10">
            <img src={getPosterPath(movie.poster_path)} alt={movie.title} className="w-[315px] h-[440px]" />
            <div className="flex flex-col  mt-10 px-4">
                    <h2 className="text-white">{movie.title}</h2>
                    <p className="text-white ">{movie.overview}</p>
            </div>
        </div>
    </div>
  )
}

export default MovieDetail

Answer 1

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>

You could consider using the style attribute instead like:

<div className="…" style={{ backgroundImage: `url('${getBackdropPath(movie.backdrop_path)}')` }}></div>