🐥 TIL: Fixing the require error in tailwind.config.js after updating NodeJS to version 23

If you are using TailwindCSS in a project, you will probably encounter an error after updating NodeJS to version 23.

In my case, I'm using TailwindCSS in a Laravel project with a configuration which looks like this:

// const defaultTheme = require('tailwindcss/defaultTheme');

export default {
  content: ['./resources/assets/js/**/**/*.vue', './resources/views/**/*.blade.php'],
  plugins: [require('@tailwindcss/container-queries')],
  important: true,
};

After updating NodeJS from version 22 to version 23, I was faced with the following error when running npm run dev:

(node:99441) ExperimentalWarning: CommonJS module /Users/pclaerhout/Documents/Contractify/contractify/node_modules/tailwindcss/lib/lib/load-config.js is loading ES Module /Users/pclaerhout/Documents/Contractify/contractify/tailwind.config.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
file:///Users/pclaerhout/Documents/Contractify/contractify/tailwind.config.js:76
  plugins: [require('@tailwindcss/container-queries')],
           ^

ReferenceError: require is not defined

After some searching around on the web, this is caused by the fact that Node.js 23 unflagged --experimental-require-module which causes the warning when ESM config files are loaded. Converting the config file to CJS is an option, but I don't recommend it as CJS is legacy (see here).

To fix it, there are two possible solutions:

• Rename tailwind.config.js to tailwind.config.cjs (which isn't recommended as CJS is legacy)
• Rename tailwind.config.js to tailwind.config.mjs (which seems to be the best approach for now)

I opted for renaming the config file to tailwind.config.mjs which fixes the issues for now.

The following table explains the differences between the '.js', '.cjs' and '.mjs' file extensions:

You gotta love JavaScript…