Tailwind: How do I add spacing between elements on this nav-bar?

I am trying to build a links nav-bar for my portfolio using TailwindCSS and I'm having trouble with spacing out each link across it.

<div class="gap-x-8` flex pt-8">
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="p-10 text-4xl text-slate-300 hover:text-slate-700" name="logo-linkedin"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-github"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="mail"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-stackoverflow"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-instagram"></ion-icon>
    </a>
  </div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

On the container tag, I have tried using:

"grid grid-cols-5"
"flex gap"

It doesn't work in tailwind.play either. I'm sure this is to do with my lack of understanding of what type of element is, but I'm really stuck.

I expected to see each element spaced out wider across the bar. I am also having trouble with some Tailwind properties not working as well. Varying elements will only accept a specific number of padding and nothing else (pt-32 / pt-8 etc.) so I'm worried it might also be something to do with the file structure.

Solution

It seems you have an erroneous backtick character attached to the gap-x-8 class, meaning the associative gap-x-8 Tailwind CSS rule would not match the class name. Consider removing the backtick to have the gap-x-8 styling apply:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="gap-x-8 flex pt-8">
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="p-10 text-4xl text-slate-300 hover:text-slate-700" name="logo-linkedin"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-github"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="mail"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-stackoverflow"></ion-icon>
    </a>
  </div>
  <div>
    <a class="cursor-pointer" href="#" target="_blank">
      <ion-icon class="text-4xl text-slate-300 hover:text-slate-700" name="logo-instagram"></ion-icon>
    </a>
  </div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

I am also having trouble with some Tailwind properties not working as well

Consider checking the files that use the Tailwind classes are covered by the content file globs in the Tailwind configuration.