PWA Guidance Modal Invisible on Vercel Build (Vite + React + Tailwind)

[Kundan1257]

🏷️ Discussion Type

Bug

Body

Subject: PWA Installation Guidance Modal is Invisible on Deployed Vite + React + Tailwind App on Vercel

Hi everyone,

I am a solo developer finalizing a Progressive Web App (PWA) built with Vite, React, and Tailwind CSS, deployed on Vercel.

My codebase is healthy, my manifest.json and sw.js are tracking properly inside the public folder, and the application opens flawlessly on mobile and desktop via direct URL routing.

However, my custom installation guidance modal component inside Header.tsx is completely invisible on all viewports (both mobile and laptop). The component logic sets a useState toggle to 'true' on load, but nothing renders visually on screen.

I suspect my Tailwind configuration is purging the custom layout classes or failing to compile the animation wrappers ("animate-in fade-in zoom-in-95").

Here is my Header.tsx file layout: https://github.com

Has anyone experienced Tailwind selectively purging custom state modal nodes on Vercel production builds? Any guidance on resolving this layout visibility bottleneck would be greatly appreciated!

Thank you!

Guidelines

• I have read and understood this category's guidelines before making this post.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[deepakraog]

One thing worth adding to the checklist above: if you're on Tailwind v4, the content: [...] array and JS-based plugin registration (plugins: [require('tailwindcss-animate')]) don't work the same way anymore. v4 does automatic content detection and plugins get registered in CSS via @plugin "tailwindcss-animate"; inside your main CSS file, not in a JS config object. If you migrated a v3 project (or copied a template) without updating that, classes like animate-in/fade-in/zoom-in-95 will silently never get generated — no error, they just won't exist in the output CSS, which matches "invisible in production, presumably fine to write."

Quick way to confirm: search your built CSS output for animate-in — if it's not in there, that's your answer, and it's a config issue, not a React/state issue.