css - 导航栏链接边距类在 Tailwind CSS 中似乎重复，有没有更好的方法？

Question

在非动态生成的菜单上，必须向每个 LI 添加 margin 类似乎真的很重复。这感觉很脏，就像使用 style=""属性一样......

肯定有更好的方法吗？

小菜单没什么大不了的，但最终菜单会有很多级别的子菜单。

我想知道我是否应该在我的样式表中编写一条规则来为我的菜单项添加边距？

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

Answer 1

我不熟悉 tailwind-css 但您可以使用 :last-child 和 :first-child 选择器。

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>