Tailwind CSS 自定义阴影不起作用

Question

Tailwind CSS 自定义阴影在我的应用程序中不起作用。

我正在尝试在 div 上应用 Tailwind CSS 自定义阴影，该阴影位于我的 Card 组件内，但我不知道为什么它不起作用。虽然Tailwind CSS官方文档说的和我申请的一样。

这是我的代码

const Card = (props) => { return(  <div className={${props.className} relative inline-flex items-center gap-4 py-2 px-4 w-fit box-shadow rounded-xl m-2 shadow-[0px_16px_11px_rgba(0, 0, 0,0.3)]}> {props. children} </div> );
};
export default Card;

Answer 1

可能是因为你的类名周围缺少反引号吗？

类似这样的：

const Card = (props) => {
  return (
    <div
      className={`${props.className} relative inline-flex items-center gap-4 py-2 px-4 w-fit box-shadow rounded-xl m-2 shadow-[0px_16px_11px_rgba(0, 0, 0,0.3)]`}
    >
      {props.children}
    </div>
  )
}
export default Card

Answer 2

当我删除 rgba 部分中的空格时，它起作用了。因此，更新了阴影的代码。成功了。

shadow-[0px_16px_11px_rgba(0,0,0,0.3)]