Why is the first class more important than the latter?

Question

<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 Vue.js because if writing normally New classes are always appended to the end.

• NuxtJS 2.15.8
• TailwindCSS 3.0.23
• postcss 8.4.5

Answer 1

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.

The cn function might be another alternative (twMerge + clsx).