Hello, I'm using Next.js 15 with the App Router and struggling with LCP in PageSpeed Insights due to critical CSS not being inlined. My ecommerce site has 300+ components (each with an SCSS module) and 80+ routes.

I saw Next.js introduced an experimental [inlineCss](https://nextjs.org/docs/app/api-reference/config/next-config-js/inlineCss) flag, but I have concerns about using it in production because:

- Large CSS bundles can slow TTFB.
- Dynamic/page-specific styles could cause redundancy.
- Browser caching benefits are lost.

I'm considering migrating from SCSS modules to TailwindCSS since its CSS bundle scales O(n) with utility classes. I'd also use the inlineCss flag. Would this improve performance/PageSpeed Insights, or is it a waste of effort?

I found this GitHub discussion https://github.com/vercel/next.js/discussions/59989 where some users report high LCP despite using Tailwind, but it's unclear if they enabled inlineCss.

Current PageSpeed Insights metrics:

FCP: 1.3s (Green)
TBT: 500ms (Yellow)
SI: 3.6s (Yellow)
CLS: 0 (Green)
LCP: 7.9s (Red) → Was better with the Pages Router.
Would love your insights! Thanks in advance. 🙏