My modal has gone full height!

[richcarni]

This is a weird one, I have a pretty simple modal that works fine on my test site

But when it's on the production server it displays full height. I'm using the latest version 2.0.10

Cleared caches, etc. Source is identical but there are definitely differences in html - unless I'm missing something this must be because the production server runs LiteSpeed with LSPHP (vs Apache)??

Anyway, I should be able to figure this out from the source but I don't understand how the modal is placed in the centre of the screen?

Super grateful for any assistance

[PhiloNL]

I would recommend looking at your production pipeline and ensuring the correct CSS is generated. Try running npm run build to test your product built locally.

[richcarni]

Thanks @PhiloNL, you are correct, the problem is with the bundled css - I can see it is missing definitions

Local npm run build worked until I ran it with a clean cache and then it exhibited exactly the same problem as production

Re-starting npm run dev and it works again, and building without clearing the cache works

So it appears to be a vite/build issue

UPDATE

I should have read the documentation more carefully, specifically Building Tailwind CSS for production

These changes to tailwind.config.js resolved the issue