Arbitrary class chaining for easier specificity control and overrides

[jinsupark]

When creating a react button component, sometimes handling the wide range of variants such as style size disabled state can sometimes intermix and the logic to apply the correct classes can be confusing and complex to write.

Idea - Allow for arbitrary chaining of classes:

<button class="bg-blue-500 destructive.bg-red-500 ...">Delete project</button>

Would generate:

.bg-blue-500 {
  background: blue;
}
.destructive.bg-red-500 {
  background: red;
}

This would mean conditionally you could slap on a .destructive class to the button element and the bg-red-500 would be override apply.

This would make handling of variants super easier and allow for a more inline/declarative experience for the developer.