How does the CSS cascade algorithm work with tailwind classes?

Question

I was having a look at the tailwind-merge and realized that because of the CSS cascade some tailwind classes cannot be overridden once applied.

example: tailwind playground

<div class="grid h-screen place-content-center bg-red-100">
  <div class="w-80 bg-red-300 py-8 px-8 p-2">Content</div>
</div>

The p-2 class cannot override the py-8 px-8 classes, no matter in what order we put them, and the same happens with this example

<div class="grid h-screen place-content-center bg-red-100">
  <div class="w-80 bg-red-300 px-8 px-20">Content</div>
</div>

I went thru the CSS Cascade documentation at mdn but I still cannot quite get it.

Can anybody explain it to me?

Answer 1

Thanks to @CBroe comment, I realized it all depends on the order in which tailwind classes appears in the generated CSS.

For this example

<div class="grid h-screen place-content-center bg-red-100">
  <div class="w-80 bg-red-300 py-8 px-8 p-2 px-20">Content</div>
</div>

tailwind generated these classes, in the following order:

...
.p-2 {
  padding: 0.5rem;
}

.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

So even though p-2 px-20 appears last in <div class="w-80 bg-red-300 py-8 px-8 p-2 px-20">Content</div>, in the CSS file the last ones are px-8 and py-8, which overrides them.