custom colors with tailwind.css and string interpolation, react app with api

Scott Barrar 0
Viewed 21

I'm trying set a custom background color with hex ie: color=#a8f07a

This isn't this working, why??

  <p className={`bg-[${color}]`}>hello message</p>

This does work (but I prefer tailwinds classes)

  <p style={{ background: `${color}` }} >hello message</p>
tailwind-css reactjs
1 Answers

Also you have to make sure that your class is not purged by your compiler. In order to do so you must safelist those colors. Here is an example to safelist all values from 1 to 100 for the "top" attribute:

//in your talwind.config.js      
safelist: [
        ...[...Array(100).keys()].flatMap(i => [`top-[${i}%]`),
    ],

You could also safelist colors by hand with one entry per color. I suggest finding a way to generate all the colors codes then to safelist them following this example.

Here is the link to the documentations regarding safelisting: https://tailwindcss.com/docs/content-configuration#safelisting-classes

LMichiels0
Related