顺风弯行-倒向没有正确显示间距

Question

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

这是没有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

根据顺风文档，参考链接

如果元素的顺序相反(使用flex-row-reverse或flex-col-reverse)，则使用space-x-reverse或space-y-reverse实用程序来确保将空格添加到每个元素的正确一侧。

因此，只需将类space-x-reverse添加到代码中，如下所示：演示

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