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.

Answer 2

I ended up doing this:

  <button type={type} title={title} disabled={disabled} className={`
    active:drop-shadow-3xl
    select-none
    font-mono
    font-bold
    m-1.5
    p-1.5
    active:translate-y-[2px]
    border-2
    border-gray-400
    rounded-md
    ${className}`}
    onClick={click}>
      {children}
    </button>

and then add whatever inside of ${className} . its not a great answer but it is how I did it