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

Question

I'm trying to get two versions of the navbar - one LTR and the other is RTL.
For that I am adding flex-row-reverse to the two necessary divs, but the space between the logo and the search bar disappears.
This is the LTR navbar without 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 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>
And this is the broken RTL version with no spacing between the logo and the search bar (when using 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

According to tailwind documentation, 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.
So just add the class space-x-reverse in your code like this: Demo
<div class="flex flex-row-reverse items-center space-x-4 space-x-reverse">