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

user_4371767 0
Viewed 1479

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 class="nav-links">
  <ul class="inline-flex mr-14 mt-10 uppercase text-base 
                    font-roboto font-semibold text-black cursor-pointer">
    <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>

tailwind-css css html
3 Answers

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

user_93493920

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

Check list style type for tailwind here

user_176455000

You can add class listItem in this way :

.listItem {
   color:blue;
   font-weight:600;
}
<div class="nav-links">
  <ul class="inline-flex mr-14 mt-10 uppercase text-base 
                    font-roboto font-semibold text-black cursor-pointer">
    <li class="listItem">
      <router-link to="/">Home</router-link>
    </li>
    <li class="listItem">
      <router-link to="">Products</router-link>
    </li>
    <li class="listItem">
      <router-link to="/solutions">Solutions</router-link>
    </li>
    <li class="listItem">
      <router-link to="/about">About</router-link>
    </li>
    <li class="listItem">
      <router-link to="/contact">Contact us</router-link>
    </li>
  </ul>
</div>

user_109623640
Related