Cannot transition between outer and inner shadows

[infinnie]

What version of Tailwind CSS are you using?
v3.2.4

What build tool (or framework if it abstracts the build tool) are you using?
PostCSS 8.4.20

What version of Node.js are you using?
v20.12.2

What browser are you using?
Edge 124.0

What operating system are you using?
Windows 11

Reproduction URL
https://play.tailwindcss.com/pkUehpOMec

Describe your issue
The button in the reproduction URL above does not transition between hover and active states, because inset and outer box shadows do not transition between each other.

With manually written CSS that does not transition:

button {
    transition: .3s;
    box-shadow: 0 2px 8px rgba(0,0,0,.1)
}
button:active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,.1)
}

To correctly transition

button:active {
    box-shadow: 0 0 transparent, inset 0 2px 6px rgba(0,0,0,.1)
}

Vue Playground link to a manually implemented correct shadow transition:
https://play.vuejs.org/#eNp9U1Fv0zAQ/iuWERqTsjRZGarSMImhPcADIOAxL05ySb2ltmWfu1RV/zvnuCtdBVOUyLnvu+++s887/smYdOOBF7xEWJtBINxWirGy9ohaMdwa+Fjx+Ffx27tpUc5igKjl7CSvdLgdwqLW7TaRynhMIjNxMECDbNdphQXLs+ztLE9v2IWDXgPz8iJxQrkrB1Z2exKI5XfBS61tC7Zg2dKItpWqL9gHM7KcPktWi+axt9qrtmBvuq5bMu1xkAoCHy1pSpRaFSydu2VQC3rjlVuJVj8Rh12T1IJe29fiXZaEJ80WlwlBGZufAzeXlTraK1Z6AzaaPFMNiXl+lp1f/0928UJWNCg38Nz8qWzGppaMsKAwar0ISOUAD02FPTqrPhUpZ/GUeMLRNVp1sk8fnFY0A1PFijd6beQA9rsJW+cqXhx6JEwMg376OsXQekie480Kmsd/xB/cGGIV/2GBDncDFT9iKGwPGOH7X99gpPURXOvWD8R+BfwJTg8+eIy0O5oCsn3Cm9x+WRttkebmt7sfEWgiDk0Fo4G5n/gVp4vw+ZXW/9qdp++nPNpPvv8DO5wO/Q==