使用 Tailwind CSS 为 <ul> 中的所有 <li> 项设置样式

Question

我有一个导航栏，它在 ul 元素内有 5 个 li 元素。我想用 Tailwind CSS 为所有 li 项目设置样式。我是否必须向所有 5 个元素添加 class 名称，或者有没有办法可以指向 ul 的 class 中的所有 li 元素。我想要 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>

Answer 1

您可以将 class 添加到 <ul> 标签，这将为所有 <li> 标签添加样式

顺风检查列表样式类型here

Answer 2

您可以在 ul 中添加 class space-x-6 以在 li

之间添加边距

Answer 3

您可以这样添加 class listItem :

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

使用 Tailwind CSS 为 <ul> 中的所有 <li> 项设置样式

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

html

css

tailwind-css