如何将插图应用于tailwindcss中的框阴影？

【问题标题】：how to apply inset to box shadow in tailwindcss?如何将插图应用于tailwindcss中的框阴影？
【发布时间】：2022-06-20 23:16:00
【问题描述】：

Tailwindcss 文档 (v3) 对 inset box shadow 的讨论如此简短，以至于我找不到将自定义插入框阴影应用于元素的方法。 shadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)] 也不起作用。只有默认的 shadow-inner 对元素起作用。有没有办法将自定义阴影内部应用于元素？或者如何在tailwind.config.js 文件中定义自定义？

【问题讨论】：

标签： css tailwind-css tailwind-3

【解决方案1】：

在括号中使用任意值时，Tailwind 将任意值直接转换为 CSS 属性，将下划线替换为空格。所以，要定义一个任意的插入框阴影，我们可以简单地使用：

shadow-[inset_0_-2px_4px_rgba(0,0,0,0.6)]

这将成为 CSS 属性：

box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.6)

【讨论】：