Tailwindcss: Unexpected padding specificity due to rule definition order

[bluematt]

I noticed that .pl-0 is defined _before_ .p-4, and thus they cannot be used together in order to set general-then-more-specific styles, e.g.

<div id="foo" class="p-4 pl-0">foo</div>

Expected: #foo { left-padding: 0; }
Actual: #foo { left-padding: 4; }

It seems all .p-n classes are defined after their related .px-n counterparts.

minimal test case

[adamwathan]

We can definitely look into tweaking the order these are defined to make that possible. It's hard to make this always work for everyone exactly as expected though, so generally we recommend avoiding using colliding styles, instead setting them separately:

<div class="py-4 pr-4"></div>

I think we can fix this case to be more intuitive though 👍

[adamwathan]

We're gonna fix this for 0.2 🙌🏻

[bluematt]

Thanks for the PR, it really does seem more intuitive. 👏

[adamwathan]

Merged this in, going to tag new release today 👍