How to get ml-auto to work inside a parent with space-x-n applied?-CodePudding

In Tailwind CSS, ml-auto (which is the equivalent of margin-left: auto) doesn't work if the element is inside of a parent with space-x-n. Is there any way to get it to work? Here's an example:

<div class="flex space-x-6">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <!-- Should be pushed to the right but isn't -->
  <button class="ml-auto">D</button>
</div>

I also tried applying mx-0 before ml-auto but it still did not work.

CodePudding user response：

If you are using JIT mode then you can important the rule of ml-auto on the button so !ml-auto. The way space-x works is with the lobotomized owl selector * * which has a higher CSS specificity than any other Tailwind class. To override this rule you will need a higher specificity, Tailwind being utility first doesn't really allow modification of specificity aside from the important rule.

You could replace space-x with gap, there's only a few browsers holding out on support and they will give in eventually, at least one of them by way of death. https://caniuse.com/?search=gap