tailwind1-6  Exercise 1: A Button with Six States
=================================================

<button id="btn" class="rounded-md bg-blue-600 px-4 py-2 text-white
  hover:bg-blue-700 active:bg-blue-800
  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600
  disabled:cursor-not-allowed disabled:opacity-50">Save</button>

  bg-blue-600                    resting
  hover:bg-blue-700              pointer over it (only on devices that can hover)
  active:bg-blue-800             while pressed
  focus-visible:outline-2 ...    a 2px outline, 2px away, only when focus should be visible (keyboard)
  disabled:*                     half opacity and a "not allowed" cursor when the disabled attribute is present

How to see each state in your own browser: hover and hold the mouse button for hover and active; press Tab for the keyboard ring; and in DevTools (Elements panel, Styles tab)
the ":hov" button lets you force :hover, :active, :focus and :focus-visible on the selected element without holding anything.

To read the result, select the button in DevTools and look at Computed, or in the console:

  const cs = getComputedStyle(document.getElementById('btn'));
  console.log(cs.backgroundColor, cs.outlineStyle, cs.outlineWidth, cs.outlineOffset, cs.opacity, cs.cursor);

What I measured, with real mouse and keyboard events in headless Chrome:

  resting                      blue-600
  pointer over it              blue-700
  mouse button held down       blue-800
  after a MOUSE click:         :focus-visible false, outline-style none  (no ring)
  after pressing Tab (fresh page): :focus-visible true, outline 2px solid, offset 2px, colour blue-600
  disabled button:             opacity 0.5, cursor not-allowed

The trap: hover a DISABLED button with only the classes above:

  disabled button, pointer over it:  background became blue-700  (hover still applied; the button looks half-faded but still reacts)

The fix is the enabled: variant on the interactive states:

<button disabled class="rounded-md bg-blue-600 px-4 py-2 text-white
  enabled:hover:bg-blue-700 enabled:active:bg-blue-800
  disabled:cursor-not-allowed disabled:opacity-50">Save</button>

  enabled:hover:bg-blue-700  compiles to  .enabled\:hover\:bg-blue-700:enabled:hover

Measured with the pointer over it: the disabled button stayed blue-600; the same classes on an enabled button still went to blue-700.

WHY THIS WORKS AS AN ANSWER
---------------------------
Each state is a separate rule, so they layer: resting colour first, then hover, then active (a pressed button is also hovered, and active comes later in the generated CSS, so it wins:
blue-800 rather than blue-700).
focus-visible is the right variant for the ring because the browser applies :focus-visible when you reached the button with the keyboard, not when you clicked it: after the mouse click
the outline style was none, and after Tab it was a 2px solid ring. focus: would have shown the ring after every click, which most designs do not want.
A disabled button is still an element under the pointer, so :hover matches it. Putting enabled: in front adds the :enabled condition to the rule, so the hover and active colours
can only appear on a button that is not disabled.