顺风暗模式不覆盖样式属性

Question

我已经为我的网站启用了暗模式，它在大多数情况下都可以正常工作。但我只有一种奇怪的行为。一个 div 元素有一个在 style 属性中定义的内部阴影。在黑暗模式下，我希望这个阴影消失。所以我写了这个：

<div style="border-radius: 16px;
            background: #e9edf0;
            box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #fff inset;"
     class="w-full mx-auto border 
            dark:bg-gray-900 dark:border-white dark:shadow-none ">...</div>

为了完成这项工作，我需要关注this post，否则样式标签中的背景属性会覆盖顺风类。然后我做了一些测试，一头雾水：

如果我从 shadow-none 类中删除“dark:”，它会删除阴影。但是如果我在 shadow-none 类之前写“dark:”，它不会删除阴影。请记住，背景会发生变化，即使它在样式标签中定义得太多并且前面还有“dark:”标签。这意味着暗模式处于活动状态，所有顺风类都应该获得“！important”属性。

我需要进行哪些更改才能使其正常工作？谢谢！

（Windows 10、Laravel Framework 最新版本、Tailwind CSS 最新版本、Firefox 86.0）

我在Video 中解释了我的问题。

Answer 1

内联样式具有最高级别的特异性，它不会被仅通过向元素添加类来覆盖。

编辑：

我的建议是将您的内联样式移至常规的 css 选择器。

编辑 v2：

正如 Tailwind 文档所说：

...dark 变体仅针对与颜色相关的类生成，包括文本颜色、背景颜色、边框颜色、渐变和占位符颜色。

我认为dark:shadow-none 实际上并不存在（这就是为什么shadow-none 有效，但dark:shadow-none 无效）。如果这是真的，不幸的是，最终的答案是这样，并且提供替代方案将远远超出这个问题的范围。