Make css classes more 'computable'

[nhh]

Describe the problem:

I am coding components and building things like a button with an is-outlined option are challenging due to the fact, that for example every border-thickness or color value also has a 'weight' value. So some classes do more than one thing.

Link to a minimal reproduction:

This example shows my try of "computing" a "isOutlined" property. That said, it would be really helpful if text-red-400 can be written as two certain properties: text-color-red text-weight-400. With that it would be more comfortable to produce components with a certain behavior based on its input.

$props.bgColor = 'red-400'

bgColorComputed: function() {
                if (this.$props.isOutlined) {
                    return 'bg-transparent border-' + this.$props.bgColor + '-2';
                }

                return 'bg-' + this.$props.bgColor;
            }

[nhh]

As i write this, i could introduce my own "color" and "weight" properties i guess 🤔