Tailwind flex-row-reverse 不能正确显示间距

Question

我正在尝试获取两个版本的导航栏 - 一个是 LTR，另一个是 RTL。为此，我将 flex-row-reverse 添加到两个必要的 div，但徽标和搜索栏之间的 space 消失了。

这是没有 flex-row-reverse 的 LTR 导航栏：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
   <nav
    class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between"
  >
    <div class="flex items-center space-x-4">
      <a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
      </a>
      <div class="lg:block relative">
        <input
          type="text"
          class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
          placeholder="Search or jump to..."
        />
        <div class="absolute top-0 right-0 flex items-center h-full">
          <div
            class="
              border border-gray-600
              rounded
              text-xs text-gray-400
              px-2
              mr-2
            "
          >
            /
          </div>
        </div>
      </div>
    </div>
  </nav>

这是损坏的 RTL 版本，徽标和搜索栏之间没有间距（使用 flex-row-reverse 时）：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
  <nav
    class="bg-gray-900 text-white px-4 py-3 flex flex-row-reverse items-center justify-between"
  >
    <div class="flex flex-row-reverse items-center space-x-4">
      <a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M12 14l9-5-9-5-9 5 9 5z" />
  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
      </a>
      <div class="lg:block relative">
        <input
          type="text"
          class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
          placeholder="Search or jump to..."
        />
        <div class="absolute top-0 right-0 flex items-center h-full">
          <div
            class="
              border border-gray-600
              rounded
              text-xs text-gray-400
              px-2
              mr-2
            "
          >
            /
          </div>
        </div>
      </div>
    </div>
  </nav>

Answer 1

根据 tailwind 文档，reference link

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

所以只需在您的代码中添加 class space-x-reverse，如下所示：Demo

<div class="flex flex-row-reverse items-center space-x-4 space-x-reverse">

Tailwind flex-row-reverse 不能正确显示间距

Tailwind flex-row-reverse doesn't display spacing properly

html

css

tailwind-css