title: Tailwind, Vue problem with non-English characters when using tags right after eachother
body: <p>I am facing an issue when using tags right after eachother(ex: <code>span</code>, 'a' and 'p').
  characters merge with each other, although they are in seperate html tags!</p>
  <p>How can I prevent that from happing?</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;a href=&quot;&quot; class=&quot;underline mx-1&quot;&gt;حریم شخصی&lt;/a&gt;
      &lt;a href=&quot;&quot;&gt;استفاده&lt;/a&gt;
  
      &lt;span&gt;حریم&lt;/span&gt;
      &lt;span&gt;استفاده&lt;/span&gt;
      &lt;span&gt;حریم&lt;/span&gt;
  </code></pre>
  <p><strong>Codepen</strong>: <a href="https://codepen.io/blackcrowxyz/pen/jOZOZoR" rel="nofollow noreferrer">https://codepen.io/blackcrowxyz/pen/jOZOZoR</a></p>
  <p>What I want:(استفاده حریم is right)
  <a href="https://i.stack.imgur.com/zHICR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zHICR.png" alt="enter image description here" /></a></p>
  <p>What I get:(استفادهحریم is wrong)
  <a href="https://i.stack.imgur.com/bcFLF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bcFLF.png" alt="enter image description here" /></a></p>
  <p>sample output:</p>
  <p><a href="https://i.stack.imgur.com/xy0EJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xy0EJ.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/0MnyQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0MnyQ.png" alt="enter image description here" /></a></p>