TailwindCSS fails in an esm project

[ghost]

ES Modules are the future, and many have realized this. NodeJS has introduced experimental esm support and popular players in open source are enforcing the use of them; for example, airbnb's widely known javascript style guide is already forbidding the use of non-standard module systems - this includes CommonJS.
To enable ESM support across my entire project, I set "type": "module" in my package.json. Unfortunately, tailwindcss is one of the small number of postcss plugins that won't work in an esm environment. When I call it in my postcss.config.js as a plugin, it assumes that the tailwind config file, tailwind.config.js, is a commonjs module, and attempts to require it (as opposed to importing it). I'd be extremely grateful if tailwind could introduce some kind of detection to tell esm and commonjs tailwind.config.js files apart, or just mandate the use of esm syntax and the .mjs file extension for the tailwind config file as the default. ES Modules are the only true standard-conformant way of using modules, and even though they're in experimental support, they're also a lot nicer to work with and a migration to esm now would definitely prepare tailwindcss for the future.
To clarify: this doesn't break tailwindcss for me. I only had to replace the file ending with .cjs in order for it to be treated as a commonjs module. But I have lost a few IDE features such as intellisense and the tailwind icon because of the different file ending, and I believe everyone should deserve esm modules without the hassle of a workaround.

[adamwathan]

Totally open to adding this but not sure how to do it. Any suggestions or ideas that would save me time before researching it myself? We just started a new work cycle here at Tailwind the company so our plates are pretty full for the next 6 weeks before we are in a position to start prioritizing new projects for the next cycle.

[ghost]

I'm not very familiar with the tailwindcss codebase. I've seen packages such as babel offering esm support with a subdirectory 'esm' in their project root which just contains esm-compatible (import/export) wrappers around the commonjs modules. Here's a step-by-step tutorial I found on supporting both cjs and esm users: https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1 . Thanks!

[natemoo-re]

Some users are running into this issue with Microsite, which is uses Node's built-in ESM. Definitely on the bleeding edge so not surprised that tooling still has to catch up.

One suggestion, rather than supporting both ESM and CJS, might be to leverage a tool like cosmiconfig and allow users to have a tailwind.config.cjs file. That wouldn't require the config format to change at all, just the extension. Hopefully on the Tailwind side, you could just add support for auto-loading that file if it exists and also intellisense for configs in that format.

[natemoo-re]

@adamwathan I decided to see how hard this would be and started on #3544. Turns out it is way easier than I originally thought it would be.

Would love some guidance to get it over the finish line... what would you expect tests for this to look like? Are there any other internals that assume the config file is a CJS file (hopefully just getModuleDependencies?)

[babichjacob]

You aren't actually limited to using CommonJS for tailwind.config.js as far as build processes are concerned because you can just import tailwindConfig from "./tailwind.config.js" (or import * as tailwindConfig from "./tailwind.config.js" if you're one of us who are opposed to default exports 😄) and pass that to tailwindcss(tailwindConfig) in the PostCSS plugins list.

You will lose out on Tailwind CSS IntelliSense though, and it's also worth mentioning postcss-cli doesn't support ESM so you'd have to write your own replacement for it for instance.

You can see my thoughts where I was convinced to sacrifice ESM until Tailwind and PostCSS support it here.

[benmccann]

You will lose out on Tailwind CSS IntelliSense

It looks like this may have been addressed in the time since: tailwindlabs/tailwindcss-intellisense#198

[natemoo-re]

Tailwind automatically picks up tailwind.config.cjs files as of v2.0.3 (via #3181).

[okikio]

Was support for tailwind.config.js in esm format also added?

[sebastia21]

I'm using tailwind in a next.js project. I got it working but "hidden" doesn't work and i can't understand why. Even in simple scenario like this :

hello

"Hello" will show no matter what. And when i hover "hidden" in vs code i can this it is suppose to do display:none; which is what i want but it does not work :/ Any idea why ?

(it's className because it's in a next.js project)

My Lowe's Life

[krishnaTORQUE]

Hi
I am still facing issue with ESM.
Does tailwind support ESM ?

[IronCub3]

I'm still face this error too, i don't think it's fixed

[cenk1cenk2]

l do also experience this issue still with the default package on the NPM.

[itekhi]

same... a year has passed...

[wongjn]

Consider checking you are using v3.3.0 or later. Is there any particular error or unexpected behavior you are experiencing?