ES Module Support for config

[acalvino4]

When my tailwind.config.js file is an ES Module, I get this below error while purging my css. This is a request to enable module support from tailwind.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/www/craft/config/build/tailwind.config.js
require() of ES modules is not supported.
require() of /var/www/craft/config/build/tailwind.config.js from /var/www/craft/node_modules/tailwindcss/lib/cli.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename tailwind.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/www/craft/package.json.

[acalvino4]

I found a workaround - I'm using gulp, so I just loaded my config into a javascript variable, then passed it into the tailwind constructor, rather than passing the config path to tailwind.

I still think es6 module support would be awesome though

...
import twconfig from './tailwind.config.js'
...
function css() {
  return src('src/css/*.css')
    .pipe(concat('main.min.css'))
    .pipe(postcss([
      tailwind(twconfig),
      autoprefix(),
    ]))
    .pipe(clean())
    .pipe(dest('web/dist/css/'))
}

[Robert9655]

To explicitly start the agent, import elastic-apm-node and call the apm. Start method with the agent configuration object. Type scripted it. If you're using.
hardee's survey

[michaelhays]

With Next.js adding support for ESM projects, it's even more necessary now for Tailwind to support using an ESM config file.

I'm unable to generate my Tailwind classes using PostCSS in an ESM Next.js project, and have to generate it manually using the Tailwind CLI.

[drawveloper]

This is also unfortunate for deno-based projects. Currently, I'm unable to import my tailwind.config.js into my deno project directly, having to go through this hop: https://github.com/FutureDrivenDev/fresh-init-tailwind/blob/main/utils/twind.ts#L6

Case in point: I'm actually using twind there under the hood, but the plugins like the excellent Tailwind CSS IntelliSense rely on CJS too, because of tailwind: tailwindlabs/tailwindcss-intellisense#399 (comment)

[damianobarbati]

@michaelhays how did you solve this?

[michaelhays]

Sorry for the late response -- I haven't solved it. I reverted that Next.js project back to CJS, and imagine it'll have to stay there for at least another year, while waiting for the ecosystem to catch up and stabilize 🙃

[minht11]

Are there any plans on solving this? Ecosystem as a whole is migrating to ESM modules and the longer it isn't supported the more painful it is gonna be. postcss-load-config supports loading ESM modules for over a year now, so any news from Tailwind team about status of this feature would be welcome.

[muradbu]

+1 for this. We have a monorepo that's mainly ESModules based.

[dionsaur84]

you can use the following workaround for now.

postcss.config.js:

import autoprefixer from 'autoprefixer'
import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.js'

export default {
    plugins: [autoprefixer, tailwind(tailwindConfig)],
}

tailwind.config.js:

export default {
    content: ['app/components/**/*.jsx'],
    theme: {
        extend: {},
    },
    plugins: [],
}

[ekwoka]

The officially supported way is to just make the config be .cjs like tailwind.config.cjs

You still won't be able to use ESM inside the file itself, but this will allow your project to be ESM, and the config be CJS.

[sindelio]

Works for me, however pretty ugly to do and see. +1 for es6 module support in the config file.

[michaelhays]

It'll be released soon: #10785

[sindelio]

Glad to hear that!

[shaobeichen]

works for me

[acalvino4]

There have been some nice workarounds suggested, but at the core I think most people on this thread just feel that modern js should have first-class support in modern libraries (to be fair, tailwind is unfortunately far from the only library that fails at allowing esm config). Sure, its not too hard to make it work. It's just annoying when your whole project is in ts and you have to then be adding linter exceptions to allow cjs syntax, not getting config validation, or having to find threads like this to work out how to translate the docs config examples to esm.

I had been using the workaround I posted at the top here, but wanted to use the multiple config file approach introduced in 3.2 - no luck, I get "Cannot use import statement outside a module" (it assumes my config is not esm); so looks like i gotta move back to cjs...

[acalvino4]

@adamwathan I don't think this thread has had any response from a maintainer, and I think the number of upvotes (#3 in all-time top idea discussions) warrants at least some word - are there any plans for this feature in the roadmap, and if so, are we talking short-term or long-term?

[michaelhays]

Here's the latest response that I know of from the team: #3544 (comment)

[acalvino4]

Anyone find a workaround for using esm config with new @config syntax?

[julioflima]

I found a workaround that resolved my problem. Maybe that could resolve your problem too.

I couldn't import .js files, not even changing to .cjs, actually changing the tailwind stopped working. I'm not using a major recent application (legacy).

So, I let all variables that I need to use in theme.ts inside of a colors.json. In the tailwind.config.js I could import files as .json, and that it was possible to import too inside of theme.ts.

[alvarlagerlof]

This is now fixed with https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support