Run Tailwind build on Next.js output rather than input

[kaelansmith]

I've had this thought for a while (but haven't really considered the potential limitations/drawbacks): would it be possible to run the TailwindCSS build process after the Next.js build process, and simply scan the built files for all the used Tailwind classes, instead of scanning the source files?

I mostly build marketing sites using a headless CMS paired with a Next.js frontend -- so one major benefit of this for me would be that I can apply Tailwind classes in the CMS block editor, and they would get included in the Tailwind scan/build because Next.js puts all the fetched page data in the built HTML files (at least when using getStaticProps -- not sure about app router).

Another benefit: I have a monorepo containing all my client sites and a large-and-growing component library that is shared across the sites. Any given site may only use 50% of the available components from the library, but 100% of the library's tailwind classes get included in each site's build; so there's a fair bit of unused CSS bloating my bundles. If Tailwind ran its build process on the Next.js build output, it would only include the Tailwind classes that were actually used for each site.

It might even be possible to generate a per-page Tailwind build output/file, ensuring each page truly only loads the CSS that is actually used on that page (not sure how exactly to import those files for the appropriate pages in an automated way).

I've searched far & wide and haven't seen any talk of this idea elsewhere -- am I missing some glaringly obvious implementation blockers?