Overlapping classes

Hello!

Awesome work on this library, feels amazing! 🎉

In React, we have a scenario which we have troubles solving using tailwindcss, but feels like we should be able to solve it using something like this. Imagine a React component that has some tailwindcss classes defined in implementation, but also receives a className prop that should be able to override it.

An example:

function Button({ className = "", children }) {
  return (
    <button className={tw("border text-white bg-blue-600", className)}>{children}</button>
  );
}

If I use this component as: <Button>blue</Button>, button should be blue, but if I try to pass bg-red-600 as className, <Button className="bg-red-600">red</Button>, then it should be red. Because of the way classes are applied (based on order in stylesheet), this isn’t possible without removing bg-blue-600 from className.

I wrote simple demo available here using twind that demonstrates simple scenario that doesn’t work.

Is there a theoretical way to make this work with this approach? I’d be willing to contribute with a bit of guidance. 😃

[lukejacksonn]

Nice, I’m not against that at all!

[just214]

It’s declarative, clearly defined in the rendered markup, and it works exactly as it should as far as I can tell. I think this is great!