tailwind css active class only works while continuing to click the button-CodePudding

I'm using tailwind to create components however when I add the active class to a component it only works if I continue to click the button.

https://imgur.com/a/qHhQvWJ

     <li>
        <a href="#" >
           <img src="./DashIcons/homeIcon.svg"  alt="">
           <span >Dashboard</span>
        </a>
     </li>

CodePudding user response：

I think you misunderstood meaning of active: variant - this is eventually same thing as CSS :active pseudo-class

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

I guess you need to apply blue background when button has active class. For this case you need to write plugin

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
    /** other settings */
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('current', '&.active');
        })
    ],
}

and change active:bg-blue-500 into current:bg-blue-500

DEMO