扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用

Question

我在 Laravel 8.44.0 项目中使用 Tailwind CSS 版本 2.0.2。我只是想为我的活动菜单选项卡添加一些样式。

这是我在 tailwind.config.js 中的变体：

    variants: {
        extend: {
            opacity: ['disabled'],
            backgroundColor: ['active'],
            borderColor: ['active'],
        },
    },

然后在我的页面上我有 links，我想在它们处于活动状态时设置样式，如下所示：

<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>

但是当 link 处于活动状态时不会应用样式。 link 背景保持白色，底部边框保持灰色。

我应该做些什么来生成新添加的变体？

谢谢！

Answer 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伪class。

:active 在您按住鼠标单击 link 时出现。它会在你放手的那一刻停用。将 css class active 添加到 link 不会激活 :active 状态。有关其工作原理的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/:active。

如果您想在标记中标记当前活动的 link，只需在您想要的 link 上设置常规 classes：

<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>

扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用

Extended variants not working in Tailwind 2.0.2 and Laravel 8

css

variant

extend

laravel

tailwind-css