Question 44025 in Html Question posted in
Some basic documentation can be found here.

background color in react js and tailwind not working – Html

I need to make business section in react project using Tailwind css so if this section is popular the background must color changes,so I need to make background color is dynamic in this line <div className{`flex flex-col p-6 mx-auto max-w-lg text-center bg-[#${if_Popular ? "f8ae51" : "fff"}] rounded-[30px] border border-gray-100 shadow `}> but not working how I can solve this problem I asked chatgpt but all answer not work I can’t understand what’s error :

my code is :

import Image from "next/image";
import React from "react";
import { logo } from "../assets";

const Business = ({
  clients,
  type,
  description,
  price,
  color,
  if_Popular,
  included,
}) => {
  return (
    <>
      <section className="flex flex-1 font-poppins">
        <div className=" mx-auto max-w-screen-xl  lg:px-6">
          <div className="">
            <div
              className={`flex flex-col p-6 mx-auto max-w-lg text-center bg-[#${if_Popular ? "f8ae51" : "fff"}] rounded-[30px] border border-gray-100 shadow `}
            >
              <div className="flex flex-row ">
                <div>
                  <Image className="h-18 w-14" src={logo} />
                </div>
                <div className="flex flex-col ml-2 py-2">
                  <p className="font-semibold text-[#6F6C90] text-[12px]">
                    for {clients}
                  </p>
                  <h3 className="mb-4 text-2xl font-semibold">{type}</h3>
                </div>

                <div className="flex flex-1 pl-4 justify-end">
                  {if_Popular && (
                    <p className="font-poppinsfont-semibold rounded-lg p-3 h-[6vh] justify-center border-[#ffffff33] bg-[#ffffff33] text-[#fff]">
                      Popular
                    </p>
                  )}
                </div>
              </div>
              <div className="flex">
                <p className="">{description}</p>
              </div>
              <div className="flex justify-start items-baseline my-4">
                <span
                  className={`mr-2 text-[#${
                    if_Popular ? `fff` : `160e4d`
                  }]  text-5xl font-poppins font-semibold`}
                >
                  $ {price}
                </span>
                <span className={`text-[#${if_Popular ? `000` : `b3b3b3`}] `}>
                  /monthly
                </span>
              </div>
              <div
                className={`text-left font-poppins mb-6 text-[#${
                  if_Popular ? `fff` : `160e4d`
                }] `}
              >
                <p className="font-semibold text-xl ">What’s included</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Business;
Tags:

3

Answers


  1. 0

    Since you’re using JSX (React), don’t write your conditions like this. Use this instead:

    <div className={`flex flex-col p-6 mx-auto max-w-lg text-center bg-${if_Popular ? "f8ae51" : "fff"} rounded-[30px] border border-gray-100 shadow`}>
 {/* ... */}
</div>
    Login or Signup to reply.
  2. 0

    tailwind does not work this way what you can do is this:

    className={`flex flex-col p-6 mx-auto max-w-lg text-center ${if_Popular ? "bg-[#f8ae51]" : "bg-[#fff]"} rounded-[30px] border border-gray-100 shadow `}

    you have to pass all the class name.

    Login or Signup to reply.
  3. 0

    Dynamic color defined in this manner will not work. Tailwind needs the whole class to be together, so you can do something like:

    ${if_Popular ? "bg-[#f8ae51]" : "bg-[#fff]"}

    bg-[#${if_Popular ? "f8ae51" : "fff"}]
    This will not work, as while compilation tailwind has to know precisely what all classes are to be added.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search