custom button component + tailwind styles being purged

Question

I want to create a button component like this:

    function Button ({ color }) {
      return (
       <button  className={`hover:bg-${color}-300 bg-${color}-100>
     
       </button>

That way I can make all of my button colors (with hover variant) consistent by just doing:

<Button color="green" >

</Button>

The problem is that purge doesn't see that I want a green button so no styling occurs when I use purge.

Is there a better way to create my button component that will comply with CSS purge?

Answer 1

css get the the classes as them write in components but for this issue you need to use
safelist: [{ pattern: /bg-(red|green|blue|sky)-(500)/, }, ], in tailwind.config to make them extract all time.