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:
- 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:
- "Feature flags"
As an example, flex and flex-grow are unrelated and simply turn on a style property.
Always use flags as flags:
In the case of bootstrap and tailwind, there are several ambiguous modifiers such as
flexandborder.So far these seem to fit two cases:
As an example,
borderis the same asborder-1, but will conflict with trying to apply colors withborder-tealbecause both have the same prop name (modifier) "border"If you intend to stack modifiers with defaults, always provide a value:
As an example,
flexandflex-groware unrelated and simply turn on a style property.Always use flags as flags: