On "click" button trigger some CSS values instead of "hover" using Tailwind and-CodePudding

I want to form some kind of event trigger that would display Tailwind values only during when my click is pressed. If I keep on pressing the button would appear as if it is physically pressed i.e. "shadow-inner" or some other tailwind value

Do I need a separate event listener or is there some tailwind event like "hover:" that I don't know of

CodePudding user response：

There is no events in tailwind for this, since this is JavaScript.

You have to use mousedown and mouseup to achieve what you want.

For example :

const button = document.querySelector('button');

button.addEventListener('mousedown', () => {
  // logic here
});

button.addEventListener('mouseup', () => {
  // logic here
});

CodePudding user response：

Use active: variant which represents :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.

<button type="button" >Button</button>

This button will be blue when clicked (pressed)

DEMO