扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用
Posted
技术标签:
【中文标题】扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用【英文标题】：Extended variants not working in Tailwind 2.0.2 and Laravel 8 【发布时间】：2022-01-14 22:37:40 【问题描述】：我在 Laravel 8.44.0 项目中使用 Tailwind CSS 版本 2.0.2。 我只是想为我的活动菜单标签添加一些样式。
这是我在 tailwind.config.js 中的变体：
variants:
extend:
opacity: ['disabled'],
backgroundColor: ['active'],
borderColor: ['active'],
,
,
然后在我的页面上，我有想要在它们处于活动状态时设置样式的链接，如下所示：
<a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200 active:border-red-500 active:bg-red-200 active">
Packages
</a>
但当链接处于活动状态时，不会应用样式。链接背景保持白色，底部边框保持灰色。
我应该做些什么来生成新添加的变体？
谢谢！
【问题讨论】：
【参考方案1】：您的代码完美运行：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config =
variants:
extend:
opacity: ['disabled'],
backgroundColor: ['active'],
borderColor: ['active']
</script>
</head>
<body>
<a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200 active:border-red-500 active:bg-red-200 active">
Packages
</a>
</body>
</html>但是，我相信你误解了:active 伪类。
:active 在您按住鼠标单击链接时出现。它会在你放手的那一刻停用。
将 css 类 active 添加到您的链接不会使 :active 状态激活。有关其工作原理的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:active。
如果您想在标记中标记当前活动的链接，只需在您想要的链接上设置常规类即可：
<a href="#packages" class="navigation__link border-b-2 bg-white border-gray-200">
Packages
</a>
<a href="#containers" class="navigation__link border-b-2 bg-white border-red-500 bg-red-200 active">
Containers
</a>
<a href="#envelopes" class="navigation__link border-b-2 bg-white border-gray-200">
Envelopes
</a>
【讨论】：
你是对的。我完全忘记了我在这里问过一个问题......但是，我想要的是能够在页面上显示相应部分时设置一些链接（菜单选项卡）的样式。我可以在 CSS 中轻松做到这一点（将样式应用于 .navigation__link.active）。与 :active 状态无关，所以我什至根本不需要扩展变体。感谢您的宝贵时间。以上是关于扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Tailwind 中使用屏幕变体将所有边距值列入安全列表
如何使用 jit 在 tailwind-css 中使用布局变体？