Tailwindcss 框阴影未显示

Question

我正在尝试在一个 React 项目中使用 Tailwindcss，我在该项目中复制了《星球大战》website 移动菜单。但是，当导航抽屉打开时，我添加到汉堡图标段的框阴影没有显示。

沙盒链接：https://play.tailwindcss.com/upmiAWTcso

index.js：

const toggleDrawer = (event) => {
  document.querySelector("#drawer").classList.toggle("left-[-100%]");
  document.querySelector("#drawer").classList.toggle("left-0");
  document.querySelector("#bar-1").classList.toggle("hidden");
  document.querySelector("#bar-2").classList.toggle("active-2");
  document.querySelector("#bar-3").classList.toggle("active-3");
};

<div
  onClick={toggleDrawer}
  className="h-full flex flex-col justify-center items-center space-y-[8px]"
>
  <span
    id="bar-1"
    className="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"
  ></span>
  <span
    id="bar-2"
    className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"
  ></span>
  <span
    id="bar-3"
    className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"
  ></span>
</div>;

global.css：

@layer components {
  .active-2 {
    @apply
      rotate-45
      -translate-x-2
      translate-y-[530%]
      !w-[34px]
      !border-l-[25px]
      !border-r-[5px]
      !border-white
      shadow-[#d50032];
  }
  .active-3 {
    @apply
      -rotate-45
      translate-x-1
      !w-[34px]
      !border-l-[5px]
      !border-r-[25px]
      !border-white
      shadow-[#106ae0] !important;
  }
}

Answer 1

您只声明了一种阴影颜色。您还需要像 shadow-md 这样的阴影大小。

这是 Tailwind Play 上的一个示例，显示了 https://play.tailwindcss.com/gxG7cir5EQ 的区别

Answer 2

您以错误的方式应用!important。要将!important 添加到顺风类中，只需添加!，添加如下开头：

@layer components {
  .active-2 {
    @apply
      rotate-45
      -translate-x-2
      translate-y-[530%]
      w-[34px]
      border-l-[25px]
      border-r-[5px]
      border-white
      !shadow-[#d50032];
  }
  .active-3 {
    @apply
      -rotate-45
      translate-x-1
      w-[34px]
      border-l-[5px]
      border-r-[25px]
      border-white
      !shadow-[#106ae0];
  }
}