CODEWITHSUNDEEP
reactjstailwind-css
Tyler Morales
Tyler Morales

Reputation: 1830

Tailwind's background color is not being applied when added dynamically

I am trying to set dynamic background colors using Tailwind.

However, the background color is not being applied to the div. I am confused because when I check the inspector, I can see that in the browser, the correct bg-${colors[index]} was applied to each div, but the color is not being rendered.

const colors = ['#7a5195', '#bc5090','#ef5675']

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  let labels = {}

  names.forEach((name,index)=>{
    labels[name] = `bg-[${colors[index]}]`
  })

  return (
    <>
    {
      names.map((name)=>{
        return(
          <div className={`${labels[name]}`}>
        {name}
      </div>
          )
      })
    }
      
    </>
  );
}

Upvotes: 26

Views: 28697

Answers (5)

darkflame
darkflame

Reputation: 383

According to https://tailwindcss.com/docs/adding-custom-styles:

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

I successfully achieved the goal strictly with "#bada55" and no other options, such as red (#FF0000) and others.

Upvotes: 2

thinkerBOB
thinkerBOB

Reputation: 176

Dynamic Background Color in React Component with Tailwind CSS

I have a React component named VisitingCard where I want to dynamically set the background color based on a prop. Here's how I achieved it using Tailwind CSS:-

const VisitingCard = (props) => {

// Destructuring props for ease of use 
const { colour, title, handle } = props;

// Object mapping color prop to Tailwind CSS background color classes  
const colorVariants = {
    green: 'bg-yellow-500',
    yellow: 'bg-red-400',
    blue: 'bg-blue-500'
  };

  return (
     <>  
       <div className={`w-40 h-20 border ${colorVariants[colour]}`}>
       <div>Title: {title}</div>
       <div>Handle: {handle}</div>
       </div>
     </>
  );
}

export default VisitingCard;

In this component, I use an object colorVariants to map color prop values to corresponding Tailwind CSS background color classes. This allows for dynamic styling based on the color prop passed to the component.

Now, when you use the VisitingCard component like this:-

<VisitingCard colour="green" title="John Doe" handle="@john_doe"/>

It will render a div with a green background, and you can easily extend the colorVariants object with additional colors as needed.

Upvotes: 1

Momen_nasser
Momen_nasser

Reputation: 39

Try this code

className={`bg-[${color}]`}

Upvotes: -6

Tim
Tim

Reputation: 59

You can also add classes to your safelist in your tailwind config.

// tailwind.config.js

// Create an array for all of the colors you want to use
const colorClasses = [
  '#7a5195', 
  '#bc5090',
  '#ef5675'
];

module.exports = {
  purge: {
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    // Map over the labels and add them to the safelist
    safelist: [
      ...colorClasses.map((color) => `bg-${color}`)
    ],
  },
  darkMode: false, // or 'media' or 'class'
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
}

This way you can use the colors that were included in the colorClasses array dynamically as they will not be purged.

Note: If you want to do bg-blue-500 for example, you'll need to include all of the color weights as part of the safelist (as well as add that color to the array).

...colorClasses.map((color) => `bg-${color}-500`)

Upvotes: 5

Vexcited
Vexcited

Reputation: 628

in Tailwind you can't use dynamic class naming like bg-${color}.

This because when Tailwind compiles its CSS, it looks up over all of your code and checks if a class name matches.

If you want dynamic name classes you should write all the class name.

But for your specific use case, I would not use the JIT of Tailwind and instead use the style attribute and dynamically change the backgroundColor value.

It will use less CSS and also give you less headache.

Finally, this is my suggestion

const colors = ['#7a5195', '#bc5090','#ef5675'];

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  const labels = {};

  names.forEach((name, index) => {
    labels[name] = colors[index];
  });

  return (
    <>

    {
      names.map((name) => (
        <div style={{ backgroundColor: `${labels[name]}` }}>
          {name}
        </div>
      )
    }
      
    </>
  );
}

Upvotes: 42

Related Questions