Tailwind，Vue 在彼此紧接着使用标签时出现非英文字符问题

Question

我在彼此之后使用标签时遇到问题（例如：span、'a' 和 'p'）。字符彼此合并，尽管它们位于单独的 html 标签中！

如何防止这种情况发生？

    <a href="" class="underline mx-1">حریم شخصی</a>
    <a href="">استفاده</a>

    <span>حریم</span>
    <span>استفاده</span>
    <span>حریم</span>

Codepen: https://codepen.io/blackcrowxyz/pen/jOZOZoR

我想要的:(استواده حریم 是对的）

我得到的是：（استفادهحریم 是错误的）

示例输出：

Answer 1

解决方案是使用  ，因为标签之间的每个字符都会防止问题发生。

    <span>قوانین و شرایط استفاده</span>
    &nbsp;
    <span>حریم شخصی</span>

结果：

Answer 2

这是你想要的方式吗？

使用弹性

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4 w-64 flex justify-between">
  <span><a href="#">
    قوانین و شرایط استفاده
    </a></span>
    <span><a href="#">حریم شخصی</a>
    </span>
</div>

使用保证金

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4">
  <span><a href="#" class="ml-5">
    قوانین و شرایط استفاده
    </a></span>
    <span><a href="#">حریم شخصی</a>
    </span>
</div>

Tailwind，Vue 在彼此紧接着使用标签时出现非英文字符问题

Tailwind, Vue problem with non-English characters when using tags right after eachother

css

font-face

vue.js

tailwind-css

tailwind-3