如何让 ml-auto 在应用了 space-x-n 的 parent 中工作？

Question

在 Tailwind CSS 中，如果元素位于 parent 和 [=16] 中，ml-auto（相当于 margin-left: auto）不起作用=].有什么办法让它工作吗？这是一个例子：

<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>

我也尝试在 ml-auto 之前应用 mx-0，但仍然没有用。

Answer 1

如果您使用的是 JIT 模式，那么您可以在按钮上使用重要的 ml-auto 规则，因此 !ml-auto。 space-x 的工作方式是使用脑叶切除 owl 选择器 * + *，它比任何其他 Tailwind class 具有更高的 CSS 特异性。要覆盖此规则，您需要更高的特异性，Tailwind 是实用程序优先，除了重要规则外，实际上不允许修改特异性。

你可以用 gap 替换 space-x，只有少数浏览器坚持支持，他们最终会屈服，至少其中一个会死掉。 https://caniuse.com/?search=gap

如何让 ml-auto 在应用了 space-x-n 的 parent 中工作？

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

html

css

margin

flexbox

tailwind-css