Add .mts and .cts support to tailwind.config or respect parent's package.json when loading TypeScript configuration files.

[JessicaSachs]

Describe the feature

I cannot avoid these errors unless I change my Tailwind config to be JavaScript with an explicit extension (tailwind.config.mjs) even though my project has "type": "module" declared.

Is it possible to properly respect the projects package.json's type or otherwise support the official TypeScript file extensions that match their JavaScript parallels?

Additional information

• [x] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

[JessicaSachs]

Workaround for some amount of Auto-complete support is to use JSDoc comments:

/**
 * See: https://github.com/nuxt-modules/tailwindcss/issues/902
 * @type { import("tailwindcss").Config }
 **/
export default {
  /* Autocomplete works within the configuration object */
}

[ineshbose]

Hi, thanks for opening this issue.

Regarding loading configuration, we use loadConfig from tailwindcss which uses jiti internally (but we may want to consider c12 for #808), and then for generating the configuration, we're still using CJS in the build directory (to be able to consistently require all syntaxes) - where would you be facing this issue?

Are we looking to add .mts, .cts here: https://github.com/nuxt-modules/tailwindcss/blob/e8e98dea4f78242e2f7ee0aa1c8f778735c94939/src/resolvers.ts#L17

[dungsil]

Hello @ineshbose ,

Could you please refer to the reproduction link? https://github.com/dungsil/issues/tree/main/nuxt-tailwindcss%23902

When running the dev server with the code below, the following error occurs whenever you change the tailwind.config.ts file.

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

[ineshbose]

Hello @ineshbose ,

Could you please refer to the reproduction link? https://github.com/dungsil/issues/tree/main/nuxt-tailwindcss%23902

When running the dev server with the code below, the following error occurs whenever you change the tailwind.config.ts file.

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

🤔 hmm, I'm not able to replicate this - could you do nuxi info and provide me with the output please? I feel we would be partly able to address this with #913.

[ineshbose]

OK I would strongly feel that this would be addressed in #913, however my concern is that package.json may include type: module, but given Tailwind conventions, some projects may have tailwind.config.js in CommonJS syntax and those places may break. Need to find a solution for all!

[JessicaSachs]

FYI require works in ESM files in more recent versions of node (22+)

[ineshbose]

Merged! Could you give nightly a try and let me know how it goes please?

https://tailwindcss.nuxtjs.org/getting-started/installation#opting-into-the-nightly-channel

[DesertCookie]

Merged! Could you give nightly a try and let me know how it goes please?

It seems to have fixed the warnings in my case. Thanks.