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?

You can't concatenate style names like that and have them picked up. You'll need to safelist every possible class you want to use this way. https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes — JHeth, Sep 16 '21 at 08:36

score 1 · Answer 1 · answered May 12 '22 at 18:54

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.

answered May 12 '22 at 18:54

AMGAD AHMAD

11
1

this is a good contribution but not a full solution – Scott Barrar Jun 12 '22 at 06:10

score 0 · Accepted Answer · answered Jun 12 '22 at 06:13

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

custom button component + tailwind styles being purged

2 Answers2