Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

Issue

Having to add margin classes to each LI seems REALLY repetitive on a menu that is not being dynamically generated. This feels dirty like using style="" attributes...

Surely there must be a better way?

Not a huge deal on a small menu, but the final menu will have many levels of submenu.

I wonder if I should just write a rule in my stylesheet to add margins on my menu items?

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<nav class="p-2 bg-indigo-900 text-white">
    <ul class="flex flex-row">
        <li class="mr-1">
            <a href="#">Home</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="#">About</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="#">Services</a>
        </li>
        <li class="ml-1 mr-1">
            <a href="#">History</a>
        </li>
        <li class="ml-1">
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

Solution

I am not familiar with tailwind-css but you can make use of the :last-child and :first-child selectors.

nav ul li {
  margin-left: 10px;
  margin-right: 10px;
}

nav ul li:first-child {
  margin-left: 0px;
}

nav ul li:last-child {
  margin-right: 0px;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<nav class="p-2 bg-indigo-900 text-white">
  <ul class="flex flex-row">
    <li class="">
      <a href="#">Home</a>
    </li>
    <li class="">
      <a href="#">About</a>
    </li>
    <li class="">
      <a href="#">Services</a>
    </li>
    <li class="">
      <a href="#">History</a>
    </li>
    <li class="">
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Answered By - user9408899