Tailwind 是一种基于 CSS 的工具类集，将众多重复的 CSS 样式提取为通用的类名，使开发者可以更便捷地进行样式编写，提高效率。然而，在使用 Tailwind 进行前端开发时，可能会遇到同一元素内 hover 和 active 伪类样式不生效的问题，本文将讨论该问题并提供解决方案。
问题描述
在开发过程中，可能需要对同一元素设置 hover 和 active 的样式，比如设置一个按钮的 hover 样式和 active 样式。在 Tailwind 中，常常使用“&:hover”，“&:active”等伪类选择器来实现该功能，示例代码如下：
-- -------------------- ---- -------
------- ----------------- ----------- ---- ---- --------------------
-------
------------------ -
----------------- -----
-
------------------- -
----------------- ---------
-
--------然而，当我们悬浮在按钮上时，背景色将变成 blue，但当我们点击该按钮时，背景颜色并不会变成 darkblue。
问题原因
该问题的原因在于 Tailwind 的优化。工具类集 Tailwind 在进行编译时会对重复使用的类名和选择器进行去重和压缩，以达到减小 CSS 文件大小，优化网页加载速度的目的。而当我们在同一元素内使用多个伪类选择器时，Tailwind 的去重和压缩机制可能会误判为重复的选择器，从而删除其中一个选择器，导致失效。
解决方案
为了解决以上问题，我们可以使用“@layer”命令将 hover 和 active 伪类样式单独提取到一个新的层级中，避免 Tailwind 非意或误为重复选择器而删除其中一个。 示例如下：
-- -------------------- ---- -------
------- ----------------- ----------- ---- ---- ------- ----------------- -------------------------------
-------
------ ---------- -
---------- -
----------------- -----
-
----------- -
----------------- ---------
-
-
--------首先，我们在按钮中使用 hover:bg-blue-600 和 active:bg-blue-700 类来实现 hover 和 active 的效果，避免了伪类选择器的使用。然后，我们使用“@layer components”命令将 hover 和 active 样式分别提取到新的层级“components”中，并将 hover 样式和 active 样式分别设置在 .btn:hover 和 .btn:active 中，达到了预期的效果。
结论
通过将 hover 和 active 伪类样式单独提取到一个层级中，我们可以避免 Tailwind 非意或误为重复选择器而删除其中一个样式的问题，实现同一元素内 hover 和 active 伪类样式的联动效果。这不仅提高了开发效率，还提高了代码的可读性和可维护性。
以上就是本文的全部内容，希望可以帮助大家解决同一元素内 hover 和 active 伪类样式不生效问题，同时也希望大家可以掌握更多前端方面的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67530aae8bd460d3ad9a9d34