Tailwind CSS 盒子阴影不生效求助：自定义阴影仍无法显示

问题根源 #

你的代码存在两个关键问题：

• 阴影任意类的字符串未正确闭合：drop-shadow-[...]和shadow-[...]末尾缺少闭合的"]，导致类名完全失效。
• 阴影参数设置不合理：你指定的10px_35px是x轴向右、y轴向下的偏移值，阴影只会集中在元素右侧和底部，顶部自然看不到效果。

修复方案 #

1. 修正语法错误
   把阴影类的引号补全，比如将错误的drop-shadow-[10px_35px_60px_10px_rgba(60,60,60, 0.5)">改为drop-shadow-[10px_35px_60px_10px_rgba(60,60,60,0.5)]。

2. 调整参数实现四边阴影

   • 使用box-shadow（对应Tailwind的shadow-*类）：将x、y偏移设为0，搭配合适的模糊半径和透明度，让阴影均匀覆盖四边：

     <div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl shadow-[0_0_20px_rgba(60,60,60,0.3)]">
       <h1 className="text-3xl">Box</h1>
     </div>
     

   • 使用滤镜阴影（drop-shadow-*类）：同样设置0偏移量，滤镜阴影会跟随元素圆角和透明度，效果更自然：

     <div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl drop-shadow-[0_0_15px_rgba(60,60,60,0.4)]">
       <h1 className="text-3xl">Box</h1>
     </div>
     

   • 可选：对称偏移阴影：如果想要轻微立体感的四边阴影，可以设置正负偏移组合：

     <div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl shadow-[-5px_-5px_15px_rgba(60,60,60,0.1),5px_5px_15px_rgba(60,60,60,0.1)]">
       <h1 className="text-3xl">Box</h1>
     </div>
     

完整修复代码 #

import React from "react";

export default function HomePage() {
  return (
    <div className="flex flex-col space-y-24">
      {/* 滤镜阴影实现四边效果 */}
      <div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl drop-shadow-[0_0_20px_rgba(60,60,60,0.3)]">
        <h1 className="text-3xl">Box</h1>
      </div>

      {/* 盒阴影实现四边效果 */}
      <div className="m-12 border border-[#e6e6e6] h-40 w-1/2 px-8 bg-white rounded-3xl shadow-[0_0_20px_rgba(60,60,60,0.3)]">
        <h1 className="text-3xl">Box</h1>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Fuaad