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

I am facing an issue when using tags right after eachother(ex: span, 'a' and 'p'). characters merge with each other, although they are in seperate html tags!

How can I prevent that from happing?

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

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

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

What I want:(استفاده حریم is right) enter image description here

What I get:(استفادهحریم is wrong) enter image description here

sample output:

enter image description here

enter image description here

cssvue.jstailwind-cssfont-facetailwind-3


Solution 1:[1]

The solution is to use &nbsp; because every character in between tags, will prevent the issue from happening.

    <span>?????? ? ????? ???????</span>
    &nbsp;
    <span>???? ????</span>

result:

enter image description here

Solution 2:[2]

Is this the way you want?

Using flex

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

Using margin

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mohit maroliya

Related Questions