Add support for tailwind.config.mjs and tailwind.config.mts

[jscarle]

What version of Tailwind CSS are you using?

tailwindcss 3.4.4

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

vue 3.4.31, typescript 5.5.2, vue-tsc 2.0.24, vite 5.3.2

What version of Node.js are you using?

node 22.3.0

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

https://github.com/jscarle/ReproTailwindCSS

Describe your issue

In preparation for Node 22 and ESM module requirements, I have started converting my projects to use .mts files so that vite transforms them to .mjs files. When building the project with vite using tailwind.config.ts, node generates the following error:

If I change the filename to tailwind.config.mts, it no longer finds the configuration.

Node 22 documentation

https://nodejs.org/api/esm.html

[RobinMalfait]

Hey!

While we can add support for the .mts file extension, the .ts file extension should just work for your use case. The big difference is the authoring experience, which allows you to use types in .ts, export default in .mjs and module.exports in .cjs.

Vite doesn't have to transpile the tailwind.config.ts file at all, it's only used by Tailwind CSS itself to eventually generate some CSS. The generated CSS will be used by Vite later on to put it in the correct location.

Are you running into other issues while using the .ts file extension for tailwind.config.ts?

Hope this helps!

[jscarle]

The issue persists regardless of the extensions used. Currently tailwind only supports .js and .ts as extensions for the tailwind.config file, both of which raise this warning.

[RobinMalfait]

We currently look for tailwind.config.js, tailwind.config.cjs, tailwind.config.mjs and tailwind.config.ts by default, but you can provide custom paths.

When I rename tailwind.config.ts to tailwind.config.js, if I then run npm run build then I don't see any errors nor warnings:

If I do something similar where I rename tailwind.config.ts to tailwind.config.mjs and then use npm run build, then it works fine as well:

I can reproduce that just using tailwind.config.ts results in a warning by Vite.

We also have a feature where you can pass a custom config path, in your package.json you can do this:

diff --git a/package.json b/package.json
index 69dcf86..936f5cc 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   },
   "postcss": {
     "plugins": {
-      "tailwindcss": {}
+      "tailwindcss": "./tailwind.config.mts"
     }
   }
 }

But even if you do this, you will still see this:

Which means that even if we auto detect the .mts file extension that you will still run into issues, and as far as I know these warnings come from node so we don't have control over its behavior.

Can you try by just using .js or .mjs and see if the problem goes away for you? While the TS syntax works (we use a tool called jiti which allows us to use TypeScript and ESM in Node.js), you probably want to use docblocks instead if you choose to go with a .mjs file while preserving some typesafety / typehints.

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you really want to use .ts or .mts, an alternative you could try is to transpile it yourself to a .mjs file and use that file instead. But I think that just using .mjs directly should do the trick.

[justb3a]

Thanks, had the same warning, can confirm that changing it to ".mjs" solves the issue 👍

[RobinMalfait]

Took another deep dive and we figured out a way to get rid of the warning. We also added support for detecting tailwind.config.cts and tailwind.config.mts files (to make the list complete).

This should be fixed by #13940, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.

[jscarle]

Awesome, thanks!

[nmu-bouharri]

Thanks, had the same warning, can confirm that changing it to ".mjs" solves the issue 👍

This worked for me as well! So glad to get rid of the message while waiting for the official release.

[alexey-koran]

@RobinMalfait Hi Robin,
Maybe also should be added support for .cts, .mts files for tailwindcss-intellisense?
I tried tailwind.config.mts after updating tailwindcss to v3.4.6 and config isn't loaded by the VSCode extension