Incompatibility with NodeJS 23.1.0

[axel-verse]

What version of Tailwind CSS are you using?

3.4.14

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

Angular 18

What version of Node.js are you using?

23.1.0

What browser are you using?

N/A

What operating system are you using?

ArchLinux

Reproduction URL

Not needed

Describe your issue

While building my app I got following bug:

(node:341900) ExperimentalWarning: CommonJS module /home/alexander/Dev/angular/moem/node_modules/tailwindcss/lib/lib/load-config.js is loading ES Module /home/alexander/Dev/angular/moem/tailwind.config.js using require(). Support for loading ES Module in require() is an experimental feature and might change at any time

thus my config is not imported. The bug affects only NodeJS 23.1.0 which is default now in ArchLinux. Downgrading to NodeJS LTS fixes the issue.

[Flyingdot]

Renaming tailwind.config.js to tailwind.config.cjs fixed the issue for me. see https://nodejs.org/api/modules.html#modules-commonjs-modules

[silverwind]

This is because 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.

Imho, tailwindcss should just use import() to load the config file which works for both ESM and CJS configs and is not experimental.

[mike-lloyd03]

Yep. Doing this fixed the problem for me:

- const colors = require("tailwindcss/colors");
+ import colors from "tailwindcss/colors"

What are the implications of this change? Why isn't this the recommended approach in the first place?

[keshmirian]

Running in SvelteKit I found I needed to rename tailwind.config.js to tailwind.config.mjs per this warning when I tried to use .cjs:

(node:20748) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

[eddyloayza]

Tailwind CSS: (node:12872) ExperimentalWarning: CommonJS module C:\Program Files\JetBrains\PhpStorm 2024.2.4\plugins\tailwindcss\server\tailwindcss-language-server is loading ES Module c:\Herd\donavisos\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)

[bergstar]

(node:83498) ExperimentalWarning: CommonJS module /node_modules/tailwindcss/lib/lib/load-config.js is loading ES Module /resources/css/filament/admin/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)

[Souvlaki42]

I encountered the same issue. I solved it by renaming tailwind.config.js to tailwind.config.mjs to force it load the confog using lazyJiti instead of require(). At this point I'm just wondering can't the project migrate its config to ESM anyways?