vue-final-modal 5.0.1

Release 5.0.1

on Node.js NPM

Bug Fixes

• No status bar flash in iOS home screen web apps. In an iOS 26 web app added to the Home Screen, the status bar area stayed white while the overlay faded in, then turned dark, and stayed dark after the modal closed. The overlay now has backdrop-filter: blur(0px), which has no visible effect, so WebKit leaves the status bar at the page color, as it does for a native <dialog>. (#537)
• Default styles can be overridden, including by Tailwind CSS v4 utilities. The default styles now live in the vfm cascade layer. Any style outside a layer, and any layer declared after vfm, overrides them. Until now, Tailwind CSS v4 utilities on the modal's elements (such as bg-black/40 or backdrop-blur-sm in overlay-class) had no effect, because vfm's unlayered styles beat the utilities layer. (#537)
  • The Nuxt module now adds the CSS before the app's own, so Tailwind utilities win.
  • Without the module, if you import vue-final-modal/style.css after Tailwind, declare the layer first in your stylesheet: @layer vfm; before @import "tailwindcss";.

Check after upgrading

With Tailwind CSS v4, utility classes in overlay-class, content-class or class that used to be ignored now apply. They usually do what you meant, but a class copied from a generic modal snippet can now change the layout. For example, z-50 on the overlay puts it above the content.