使用 tailwindCss 进行反应时背景颜色无法正常工作

Question

div 的背景颜色设置为黑色，但“位置”和“联系人”等子组件没有背景颜色。

我的结果如下所示：

我想要一个黑色背景：

这是我用 tailwindcss 和 React 编写的代码：

<div
  id="menu-elements"
  className="flex md:hidden gap-[32px]  flex-col bg-black text-red-500 my-12 mx-6 h-[14px]      tracking-[2px] text-sm leading-[14px] uppercase">
        <Link to="/ourCompany">Our Company</Link>
        <Link to="/locations">Locations</Link>
        <Link to="/Contact">Contact</Link>
</div>

我尝试过：

<div
        id="menu-elements"
        className="flex md:hidden gap-[32px]  flex-col bg-black text-red-500 my-12 mx-6 h-[14px] tracking-[2px] text-sm leading-[14px] uppercase"
      >
        <div className="bg-black">
          <Link to="/ourCompany">Our Company</Link>
        </div>
        <div className="bg-black">
          <Link to="/locations">Locations</Link>
        </div>
        <div className="bg-black">
          <Link to="/Contact">Contact</Link>
        </div>
      </div>

结果：

Answer 1

考虑从

h-[14px]

包装器中删除

<div>

类。这适用于

height: 14px

，因此黑色背景颜色只会是

14px

高 –

<div>

的高度。

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div id="menu-elements" class="flex gap-[32px] flex-col bg-black text-red-500 my-12 mx-6 tracking-[2px] text-sm leading-[14px] uppercase">
  <a href="/ourCompany">Our Company</a>
  <a href="/locations">Locations</a>
  <a href="/Contact">Contact</a>
</div>