title: BackgroundImage is not changing dynamically using tailwind & nextjs
body: <h2>Intro</h2>
  <p>I am creating a weather application with nextJS and TailwindCSS. I had almost created the whole application but stuck at the end with this UI issue.
  <a href="https://i.stack.imgur.com/rjBWE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rjBWE.jpg" alt="web" /></a></p>
  <h2>What do I want?</h2>
  <p>I want to change the backgroundImage dynamically depending upon the weather description ( ex: clear sky, haze, rain, snow).</p>
  <h2>Problem</h2>
  <p>For that I had written a function <code>changeBackground(&quot;rain&quot;)</code> but it is not working. I had defined all the image paths in the <code>tailwind.config.js</code> file. After debugging, I  found that the function is giving the correct answer (printed answer in console) but my <code>className=&quot;bg-${changeBackground(&quot;rain&quot;)}&quot;</code> not working.  Below is the code for this</p>
  <p><strong>tailwind.config.js</strong></p>
  <pre><code>module.exports = {
    content: [
      &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
      extend: {
        backgroundImage: {
          'day_sun' : &quot;url('../public/back_big.jpg')&quot;,
          'day_rain' : &quot;url('../public/dayrain.jpg')&quot;,
          'day_cloud' : &quot;url('../public/daycloud2.jpg')&quot;,
          'day_snow' : &quot;url('../public/daysnow.jpg')&quot;,
          'night_sun' : &quot;url('../public/nightsunny.jpg')&quot;,
          'night_snow' : &quot;url('../public/nightsnow.jpg')&quot;,
          'night_thunder' : &quot;url('../public/nightthunder.jpg')&quot;,
        }
      },
    },
    plugins: [],
  }
  
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre><code>import Head from &quot;next/head&quot;;
  import { useEffect } from &quot;react&quot;;
  import Image from &quot;next/image&quot;;
  import { useState } from &quot;react&quot;;
  import Today_highlight from &quot;./components/Today_highlight&quot;;
  import Weather_Today from &quot;./components/Weather_Today&quot;;
  import Weather_week from &quot;./components/Weather_week&quot;;
  import searchimageurl from &quot;../public/search.gif&quot;;
  import Typed from &quot;react-typed&quot;;
  
  
  const Home = () =&gt; {
    //console.log(&quot;res1 = &quot;, results1);
    //const router = useRouter();
    const [city, setCity] = useState(&quot;&quot;);
    const [data, setData] = useState({ day: {}, week: {} });
  
    
  
  
    //for the first time
    useEffect(() =&gt; {
      (async () =&gt; {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=Delhi&amp;appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
        const res1 = await fetch(url);
        const response1 = await res1.json();
        //console.log(&quot;res1 = &quot;,response1);
  
        //api-2
        const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=Delhi&amp;appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
        const res2 = await fetch(url1);
        const response2 = await res2.json();
        //console.log(&quot;res2 = &quot;,response2);
  
        setData({ day: response1, week: response2 });
      })();
    }, []);
  
  
    const handleChange = (e) =&gt; {
      setCity(e.target.value);
      //console.log(city)
    };
  
    const handleSubmit = async (e) =&gt; {
      //console.log(&quot;%c ClickSubmit&quot;,&quot;font-size:12px; color:green; padding:10px;&quot;)
      //console.log(&quot;city = &quot;, city);
      //router.push(`/?term=${city}`);
  
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
      const res = await fetch(url);
      const data1 = await res.json();
      //console.log(data1);
  
      //api-2
      const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&amp;appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;
      const res1 = await fetch(url1);
      const data2 = await res1.json();
      //console.log(data2);
      setData({ day: data1, week: data2 });
    };
  
    //console.log(data);
    const weather = data?.day?.weather;
    
    //console.log(&quot;we - &quot;,weather[0]?.description)
    //fn to determine the bg
    function changebackground(des) {
      //console.log(&quot;des =&quot;,des)
  
      if (des === &quot;sky is clear&quot; || des === &quot;clear sky&quot;) return 'day_sun';
      else if (des === &quot;few clouds&quot;) return 'day_cloud';
      else if (des === &quot;scattered clouds&quot;) return 'day_cloud';
      else if (des === &quot;broken clouds&quot; || des === &quot;overcast clouds&quot;)
        return 'day_cloud';
      else if (
        des === &quot;shower rain&quot; ||
        des === &quot;light rain&quot; ||
        des === &quot;drizzle&quot; ||
        des === &quot;moderate rain&quot;
      )
        return 'day_rain';
      else if (
        des === &quot;rain&quot; ||
        des === &quot;very heavy rain&quot; ||
        des === &quot;heavy intensity rain&quot; ||
        des === &quot;extreme rain&quot; ||
        des === &quot;heavy intensity shower rain&quot;
      )
        return 'day_rain';
      else if (
        des === &quot;thunderstorm&quot; ||
        des === &quot;light thunderstorm&quot; ||
        des === &quot;heavy thunderstorm&quot; ||
        des === &quot;ragged thunderstorm&quot; ||
        des === &quot;thunderstorm with rain&quot;
      )
        return 'night_thunder';
      else if (des === &quot;snow&quot; || des === &quot;light snow&quot; || des === &quot;heavy snow&quot;)
        return 'day_snow';
      else if (
        des === &quot;light rain and snow&quot; ||
        des === &quot;rain and snow&quot; ||
        des === &quot;light shower snow&quot;
      )
        return 'night_snow';
      else if (
        des === &quot;mist&quot; ||
        des === &quot;fog&quot; ||
        des === &quot;smoke&quot; ||
        des === &quot;haze&quot;
      )
        return 'day_rain';
      else return 'day_sun';
    }
  
    console.log(changebackground(&quot;snow&quot;),&quot;-&gt; picture&quot;)
  
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;Weather-Lytics&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;div  className={`lg:bg-${changebackground(&quot;snow&quot;)} bg-no-repeat`} &gt;
          {/* input */}
          &lt;div className=&quot;p-3 xl:p-5 flex flex-row justify-center items-center space-x-2 xl:space-x-5 &quot;&gt;
            &lt;div className=&quot; border-2 border-stone-700 rounded-full &quot;&gt;
              &lt;Typed
                strings={[
                  &quot;Search for Delhi&quot;,
                  &quot;Search for Tokyo&quot;,
                  &quot;Search for California&quot;,
                  &quot;Search for Ulaanbaatar&quot;,
                ]}
                typeSpeed={30}
                backSpeed={50}
                attr=&quot;placeholder&quot;
                loop
              &gt;
                &lt;input
                  className=&quot;w-full rounded-full p-2 xl:p-4 pl-5 xl:pl-10 text-base xl:text-3xl text-blue-800 font-bold active:rounded-full &quot;
                  value={city}
                  type=&quot;text&quot;
                  onChange={handleChange}
                /&gt;
              &lt;/Typed&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button
                className=&quot;p-1 m-auto p-auto&quot;
                onClick={() =&gt; handleSubmit()}
              &gt;
                &lt;div className=&quot;w-14 h-14 xl:w-16 xl:h-16 p-2 rounded-full bg-pink-400 border-2 hover:bg-pink-600 border-white&quot;&gt;
                  &lt;Image
                    src={searchimageurl}
                    layout=&quot;responsive&quot;
                    alt=&quot;Search_icon&quot;
                    className=&quot; rounded-full p-3 bg-blue-900 &quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;min-h-full  flex flex-col lg:flex-row justify-evenly &quot;&gt;
            &lt;div className=&quot;bg-white/50 xl:bg-white/70  w-full h-full lg:w-1/4 lg:h-full xl:m-4 rounded-lg xl:rounded-3xl&quot;&gt;
              &lt;Weather_Today results={data.day} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot; lg:h-full&quot;&gt;
              &lt;div className=&quot;min-h-full flex flex-col&quot;&gt;
                &lt;div className=&quot;bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl&quot;&gt;
                  &lt;Today_highlight results={data.day} /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl&quot;&gt;
                  &lt;Weather_week results1={data.week} /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  
  export default Home;
  
  </code></pre>
  <h3>Please help me to do so???</h3>