Upgrade dependency postcss-load-config to support postcss configs that use ESM with TypeScript

What version of Tailwind CSS are you using?

3.4.3

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

vite 5.2.11 (@ electron-forge 7.4.0 x electron 30.0.2) just using the vite layer to debug (npx vite)

What version of Node.js are you using?

22.1.0

What browser are you using?

N/A

What operating system are you using?

win11

Reproduction URL

https://github.com/aentwist/tailwind-upgrade-postcss-repro

Describe your issue

My project cannot handle postcss config that uses ESM and TypeScript. Apparently there was a fix for this in v5 https://github.com/postcss/postcss-load-config/issues/239.

$ npm why postcss-load-config
postcss-load-config@4.0.2 dev
node_modules/postcss-load-config
  postcss-load-config@"^4.0.1" from tailwindcss@3.4.3
  node_modules/tailwindcss
    dev tailwindcss@"^3.4.3" from the root project

https://github.com/tailwindlabs/tailwindcss/blob/f65023efb97832660dc17cf954504f9f156047ba/package.json#L84

Actually though, postcss-load-config is now on v6. The breaking changes are very light - a node upgrade that drops support for versions of node that have been unmaintained for a year minimum now [v5], and requiring yaml users to install their own yaml dependency [v6].

I see that unfortunately tailwind still supports old versions of node (14),

https://github.com/tailwindlabs/tailwindcss/blob/f65023efb97832660dc17cf954504f9f156047ba/package.json#L116

so I guess this is a breaking change. In that case, may as well upgrade all the way to whatever latest is when the opportunity comes.

For now, I will use commonjs and TypeScript, by using a .cts extension for the postcss config. This seems to work fine, but I know that for some reason in these configurations the postcss config file produces no warning if not present, however if present produces a seemingly related warning when running the app (vite) and loading the page.

(node:19428) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

I was hoping that just supporting ESM and TypeScript would make it go away. Sadly for completeness, I cannot figure how to pass that node option through vite to get the full trace.

My postcss config is the recommended starter,

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

I've tried various combinations of file extension and export syntax with "type": "module" and cannot make this warning disappear. For TS, I'm using "module": "nodenext".

tailwindlabs / tailwindcss

Upgrade dependency postcss-load-config to support postcss configs that use ESM with TypeScript #14152