我正在嘗試在復制星球大戰網站移動選單的 React 專案中使用 Tailwindcss 。但是，當導航抽屜打開時，我添加到漢堡包圖示段的框陰影沒有顯示。
沙盒鏈接：https : //play.tai??lwindcss.com/upmiAWTcso
索引.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;
}
}
uj5u.com熱心網友回復：
你應用!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];
}
}
uj5u.com熱心網友回復：
您只宣告了一個陰影顏色。您還需要像shadow-md.
這是 Tailwind Play 上的一個示例，顯示了不同之處https://play.tai??lwindcss.com/gxG7cir5EQ
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399999.html