Ambiguous modifiers

[d3dc]

In the case of bootstrap and tailwind, there are several ambiguous modifiers such as flex and border.

So far these seem to fit two cases:

1. Default values

As an example, border is the same as border-1, but will conflict with trying to apply colors with border-teal because both have the same prop name (modifier) "border"

If you intend to stack modifiers with defaults, always provide a value:

border={[ 1, "teal" ]}

2. "Feature flags"

As an example, flex and flex-grow are unrelated and simply turn on a style property.

Always use flags as flags:

flex
flexGrow
flexColumn

[d3dc]

I'm going back and forth on whether something like sass's & would ever be needed