Extended variants not working in Tailwind 2.0.2 and Laravel 8-CodePudding

I am using Tailwind CSS version 2.0.2 in a Laravel 8.44.0 project. I am simply just trying to add some styling to my active menu tabs.

Here are my variants in tailwind.config.js:

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

then on my page I have links that I want to style when they are active, like this:

<a href="#packages" >
                        Packages
                    </a>

But the styling is not applied when the link is active. The link background stays white and the bottom border stays gray.

Is there anything I was supposed to do to generate the newly added variants?

Thanks!

CodePudding user response：

Your code works perfectly:

<!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" >
    Packages
  </a>
</body>

</html>

However, i believe youre misunderstanding the :active pseudoclass.

:active is present while youre holding down the mouse-click on the link. It will deactivate the moment you let go. Adding the css class active to your link will not make the :active state activate. See https://developer.mozilla.org/en-US/docs/Web/CSS/:active for more info about how it works.

If you want to mark the currently active link in the markup, just set the regular classes on the link you want to:

<a href="#packages" >
  Packages
</a>
<a href="#containers" >
  Containers
</a>
<a href="#envelopes" >
  Envelopes
</a>