Style all <li> items in <ul> with Tailwind CSS-CodePudding

I have a navbar that has 5 li elements inside ul element. I want to style all the li items with Tailwind CSS. Do I have to add class names to all 5 elements or is there a way I can point all li elements in ul's class. I want this functionality with tailwind.css

.nav-links li {
  margin-right: 52px;
}

<div >
  <ul >
    <li>
      <router-link to="/">Home</router-link>
    </li>
    <li>
      <router-link to="">Products</router-link>
    </li>
    <li>
      <router-link to="/solutions">Solutions</router-link>
    </li>
    <li>
      <router-link to="/about">About</router-link>
    </li>
    <li>
      <router-link to="/contact">Contact us</router-link>
    </li>
  </ul>
</div>

CodePudding user response：

You can add class space-x-6 in ul to add margin between li

CodePudding user response：

You can add a class to the <ul> tag which will style all the <li> tags

Check list style type for tailwind here

CodePudding user response：

You can add class listItem in this way :

.listItem {
   color:blue;
   font-weight:600;
}

<div >
  <ul >
    <li >
      <router-link to="/">Home</router-link>
    </li>
    <li >
      <router-link to="">Products</router-link>
    </li>
    <li >
      <router-link to="/solutions">Solutions</router-link>
    </li>
    <li >
      <router-link to="/about">About</router-link>
    </li>
    <li >
      <router-link to="/contact">Contact us</router-link>
    </li>
  </ul>
</div>