在使用 Tailwind 进行前端开发时，我们可能会遇到一些问题，其中一个常见的问题是在 hover 下，背景颜色不会生成阴影。这个问题可能会让我们的网站看起来不够美观，但是不要担心，这个问题是可以解决的。
问题的原因
在 Tailwind 中，我们可以使用 hover 属性来设置鼠标悬停时的样式。但是，当我们在背景颜色中使用 hover 属性时，它不会生成阴影。这是因为 Tailwind 的默认配置中，没有为背景颜色添加阴影效果。
解决方法
为了解决这个问题，我们需要手动添加阴影效果。我们可以使用 box-shadow 属性来实现这个效果。
首先，我们需要在 tailwind.config.js 文件中添加阴影效果。我们可以在 theme 中添加一个新的颜色选项，用于设置阴影的颜色。例如：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ -
------- -
---------- -
------ -- - ---- ------- -- -- -----
-
-
--
--------- ---
-------- --
-在这个例子中，我们添加了一个名为 hover 的阴影效果，它的颜色为黑色，透明度为 0.5。
接下来，我们可以在 CSS 中使用这个阴影效果。我们只需要在 hover 属性中添加 shadow-hover 类即可。例如：
<div class="bg-blue-500 hover:bg-blue-700 hover:shadow-hover"></div>
在这个例子中，当鼠标悬停在这个 div 上时，它的背景颜色将变为深蓝色，并且将生成一个黑色的阴影效果。
总结
通过手动添加阴影效果，我们可以解决 Tailwind 的背景颜色在 hover 下不生成阴影的问题。这个问题的解决方法非常简单，只需要在 tailwind.config.js 文件中添加阴影效果，并在 CSS 中使用即可。这个解决方法不仅可以帮助我们解决这个问题，还可以让我们更好地理解 Tailwind 的配置和使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dae4d91886fbafa480584b