Hi 👋

I’m facing an issue with modal width classes not being generated properly in Tailwind CSS v4 for dynamic sizes like 4xl, 5xl, etc.

In Tailwind v3, I could use safelist with variants to ensure responsive utility classes like sm:max-w-2xl would be included. However, with the new version of Tailwind v4, this method no longer works, and we need a new approach using the @source directive.

To resolve this issue and ensure all necessary modal widths are available, please update your app.css or Tailwind entry file with the following line:

@source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}");
This will generate all the necessary max-w-* classes for your modal component, ensuring it works as expected with sizes like '4xl', '5xl', etc.

Thank you for your attention to this, and I appreciate your great work! 🙌