Tailwindcss: Conflicting className precedence rules

[jasonlimantoro]

Given

<button class="rounded-lg p-4 inline-block p-0 default ripple">No?</button>

which has a conflicting className: p-4 and p-0

Expected

The button should have a padding of 0, following the CSS rules, i.e. the one that's defined later takes precedence.

Actual

The button has a padding of 4 (p-4 is taking effect).

Side notes

Interestingly, if I swap the class name position from Chrome devtools, i.e.

<button class="rounded-lg p-0 inline-block p-4 default ripple">No?</button>

The button still has a padding of 4.

Is this the expected behavior?

[tlgreg]

It's expected behavior. This is how html and css works, you can't change the precedence in html with the order of class-names.

What matters is the specificity of css selectors and the order of declarations in the source code if the specificity is the same. Because these declarations have the same specificity (single class-names) and the .p-4 declaration is defined later than .p-0 it will be the one applied to the element.
Read more about specificity: MDN Article | Specifics on CSS Specificity (CSS-Tricks)

If you are trying to dynamically toggle between p-0 and p-4 you should always swap them out, toggle both, you shouldn't rely on css source order.

[jasonlimantoro]

@tlgreg got it, thanks for the in depth answer

[tim-phillips]

The order of class names defined on an HTML element have no effect on styling. CSS Specificity only cares about what is defined in stylesheets.

Most specificity articles, including the ones referenced above, don't talk about the order of HTML class names. This helped:

https://stackoverflow.com/questions/12258596/class-overrule-when-two-classes-assigned-to-one-div/12258654

As a workaround, I've defined some base styles in order to increase specificity in my tailwind.css:

@tailwind base;

body {
  @apply text-sm;
}

nav a {
  @apply px-3;
  @apply py-2;
  @apply text-gray-800;
}

nav a.active {
  @apply rounded-sm;
  @apply bg-blue-gray-dark;
  @apply text-gray-200;
}

@tailwind components;

@tailwind utilities;

[DylanVann]

It would be interesting to make something like https://www.npmjs.com/package/classnames, but that removes p-4 from the output if it sees p-0 applied after. This would allow making React components that can have Tailwind styles overridden, even if they're being overridden with classes of lower specificity.