JIT, color variations and component treeshaking

[clemyan]

So I am using Tailwind in a React project. I want to make color variations available for base components (e.g. Button) and I'm not sure what is the best way to do it in the face of JIT. If anyone has dealt with this I'd like some ideas.

---

Of course the naïve way of doing variations does not work well with JIT:

// MyButton.jsx
<button className={`px-4 py-2 rounded-lg /* ... */ bg-${props.color}-200 text-${props.color}-500`}>

// App.jsx
<MyButton color="blue"> // NOPE

So I have been doing it by passing the color variation classes in from the consumer and merging them with the common styling in the component:

// MyButton.jsx
<button className={`px-4 py-2 rounded-lg /* ... */ ${className}`}>

// App.jsx
<MyButton className="bg-blue-200 text-blue-500">

But for the common case, that is more freedom than I'd like. Having the flexibility of specifying any class is nice but I'd like to somehow define a common "blue button" for consistency's sake: (pseudo-code)

// MyButton/Blue.jsx
variant(MyButton, 'bg-blue-200 text-blue-500')

// App.jsx
import MyBlueButton from '@/components/MyButton/Blue';
<MyBlueButton>

This works, but problem is that bg-blue-200 and text-blue-500 will be included in the bundle regardless. The component itself will be treeshaken if no one uses it, but Tailwind's JIT is based on source code so it will see those classes being used before the component is removed.

---

To be clear, I'm not saying "Tailwind should support this out-of-the-box". I just want some ideas/insight into how other people would deal/have dealt with this.

I'm using Vite btw, but any idea is welcome.