NextJS - custom pageExtension makes no classname generation by both content and safelist

[spilist]

What version of Tailwind CSS are you using?

• 3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

• "next": "^12.1.6", (also tested with 12.1.7-canary.5 which contains Leverage pageExtensions for resolving in loader vercel/next.js#36747 but no luck)
• "react": "^18.1.0",
• "postcss": "^8.4.13",

What version of Node.js are you using?

• 16

What browser are you using?

• Latest Chrome

What operating system are you using?

• MacOS Monterey (12.1)

Reproduction URL

• https://stackblitz.com/edit/github-mcndf4
• I made it from https://tailwindcss.com/docs/guides/nextjs, and changed two things:
  • Add pageExtensions: ['page.tsx'], on next.config.js (Refer to https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory)
  • Rename pages/index.tsx to pages/index.page.tsx
• Note that it uses Webpack instead of swc due to .babelrc.

Describe your issue

• When I add pageExtensions option to next.config.js, both content and safelist don't generate specified classnames. When I rolled back to default next config, they start working.
• I suspected next's pageExtensions config somewhat changes how to resolve those pages, but still have no idea why safelist is not working either. I'm not sure where does this issue come from, but because of safelist I though it also can be an issue of tailwindcss.

[adamwathan]

Hey! Super weird one, it looks like Next.js is actually completely ignoring globals.css entirely when using custom page extensions:

https://stackblitz.com/edit/github-mcndf4-kjpkp1?file=styles/globals.css

So I don't think this is a Tailwind CSS issue 🤔 Going to convert this to a discussion but hopefully can track down what's happening.