[Collapsible] Exit animation doesn't run when using motion and Tailwind v4

[mj12albert]

https://codesandbox.io/p/devbox/suspicious-kate-j22y8v

Tailwind v4's reset sets display: none !important on the [hidden] selector, and the way motion sets styles cannot override !important

The workaround is to set hidden={undefined} on the panel, it will be unmounted as soon as hidden becomes true anyway:

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger />
  <AnimatePresence>
    {open && (
      <Collapsible.Panel
        keepMounted
        key="MyPanel"
        // workaround tailwind `display: none !important` on [hidden]
        hidden={undefined}
        render={
          <motion.div
            initial={{ height: 0 }}
            animate={{
              height: "auto",
              transition: { duration: 1 },
            }}
            exit={{
              height: 0,
              // ensure the panel is visible during the exit animation
              display: "block",
              transition: { duration: 1 },
            }}
          />
        }
      >
        {/* panel content */}
      </Collapsible.Panel>
    )}
  </AnimatePresence>
</Collapsible.Root>

Base UI version

1.0.0-alpha.7

[mj12albert]

In #1601 I tried to delay setting hidden until detected animations have finished using the opacity: 0.9999 trick documented here but it didn't work