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==

[diana658h]

Thanks for sharing this type of post I think I can face issue like this.

florida blue login

[thecrypticace]

Hey! So we've already addressed this in v4 where we have support for up to 4 shadows simultaneously via inset-shadow-*, inset-ring-*, shadow-*, and ring-* utilities.

You can see an example here where I'm using these new utilities and the transitions work as expected: https://play.tailwindcss.com/zMYU8vIxsZ

The key things to note are the uses of:

• shadow active:shadow-transparent — Add the shadow and hide it when the button is clicked
• inset-ring inset-ring-transparent active:inset-ring-black/5 — Add the inside border and keeps it animatable by making sure it's present but transparent by default
• inset-shadow not-active:inset-shadow-transparent — Adds the default inset shadow. Also animatable because it's always present but transparent until the button is clicked.

You'll notice that all of the shadows are present at the same time — just some of them are transparent until the button is clicked.

In v3 the shadow-inner utility is just a config value where we add the inset keyword. I'm hesitant to attempt adding support multiple shadows in v3 (or even just adjusting shadow-inner like the above) because it might have unintended consequences with respect to colored shadows or other interactions and we want to do our best to prevent potential breaking changes there.

Given that v4 provides the utilities to produce the expected behavior I'm gonna close this one — thanks! ✨