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

Posted 2023-03-06

【中文标题】使用 Tailwind CSS 为 <ul> 中的所有 <li> 项目设置样式

【英文标题】：Style all <li> items in <ul> with Tailwind CSS

【发布时间】：2022-01-19 10:00:50

【问题描述】：

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

【参考方案1】：

您可以向<ul> 标签添加一个类，该类将设置所有<li> 标签的样式

顺风here的检查列表样式类型

【参考方案2】：

您可以在ul 中添加类space-x-6 以在li 之间添加边距

【讨论】：

这行得通。但我需要 space-x-16 来保存 ~52px 的空间。

【参考方案3】：

你可以这样添加类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>