<p class="mt-1 mt-2" ></p>
Why does the above show margin 4 px instead of margin 8 px Because the last class should be more important.
I'm having a lot of trouble when writing an "if" in vuejs because if writing normally New classes are always appended to the end.
This is not a matter of priority CSS-wise (like specificity) but with Tailwind you should be using only one class at a time, because they are defined in a single file.
So should rather use some conditional to achieve the end result you're looking for. Check the second part of my answer here. It's based on the answer of one of Tailwind's maintainer (in Github discussions).
This is the general idea
<button
class="flex items-center w-auto p-4 text-center ..."
:class="[
callToAction.types[color][variant], // here is the important part
{ 'opacity-50 cursor-not-allowed shadow-none': disabled },
]"
>
Nice flexible button
</button>
Otherwise, packages like tailwind-merge also exist to solve this kind of behavior.