| I don’t know that this exactly addresses your issue, in fact I don’t think it does, but when I have a case like this there’s two approaches: The first is that my button will have variants, eg “primary, secondary, danger”. Those are a prop, the prop only accepts those values, and the value determines the classes applied ```
<button
:class=“{
‘bg-blue’: variant === ‘primary’,
‘bg-amber’: variant === ‘secondary’,
‘bg-red’: variant === ‘danger’,
>
``` You could also have those variants just make a class=“variant-<value>” class and then use scoped styles to apply the proper classes - I’ve personally moved away from scoped styles in the last year. Alternatively, such as in your case, I’d honestly lean towards !important: ```
<MyButton className=“!bg-green-500”>
``` And I know I know, !important bad!, and at least with Tailwind it’s obviously clear when someone has used !important. There’s no need to dig into the style files to track down the rule only to find someone sprinkled !importants everywhere. |