Why is ml-* having no effect inside a space-x-* parent?

[leemason]

Not sure if this is a bug or expected behaviour (its obvious why its happening) but i spent a little time figuring out why i couldn't "float" a menu item to the right of the flex container. Turns out it was because im using space-x-2 on the container to separate the items. This seems to have a higher specificity than the (in my case) ml-auto class:

<nav class="max-h-16 p-4 flex items-center justify-start space-x-2 bg-white shadow-sm">
    <a href="#">Breadcrumb Style</a>
    <a href="#">Links</a>
    <a href="#" class="ml-auto">Right Nav Link</a>
</nav>

Only way i can get the desired effect is applying style="margin-left: auto;" which resolves the issue.

1. Is this a side effect or expected?
2. Any suggestions for a different approach if its expected?

[simonswiss]

Hi @leemason 👋

1. Is this a side effect or expected?

It's kinda... both! 😅

Your ml-auto is not being applied because the spacing utility has a higher specificity, as you correctly guessed.

This is an expected side effect of the implementation of the spacing utilities, and the trade-offs were acknowledged with a good deal of details by @adamwathan in the PR implementing these spacing utilities.

If you scroll down to the implementation section, you'll find an elaborate response to your question!

2. Any suggestions for a different approach if it's expected?

In situations where you need to control "internal spacing", the recommendation is to revert to the "old way" of handling spacing on the children, instead of applying spacing utilities on the parent 👍

[leemason]

Perfect thanks for the detailed answer simon. I looked through the issues to try and find it but never thought to look at the original pr 🤦‍♂️.