ECMA version of tailwind.config.js is throwing error

[jd-solanki]

I am using vite + vanilla JS + pug.

I like to write in ES6 and when I setup vite with es6 and convert tailwind config's module.exports to export default

everything is working except autocompletion.

Output console shows below error:

[clorichel]

Just faced the #395 issue 😕

Tailwind CSS: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

Posting here because of your note out there @bradlc 🤓

Weird enough: nothing changed in the repo, but... the computer did change! Honestly can't say why the extension is working fine on my former MacBook, and throwing the above error on my new MacBook with the exact same code 🙃

Renaming the tailwind.config.js file to tailwind.config.mjs did the trick, that feels odd though, doesn't it? 🧐

[john-pimq]

@clorichel I am using storybook with tailwind in my project. If i change tailwind.config.js to tailwind.config.ts or tailwind.config.mjs, the storybook addon will throw an error. Is there anything could I close the error prompt from tailwindcss-intellisense without change the file extension of tailwind.config.js ?

[finnmerlett]

If I change to tailwind.config.mjs the extension fails to recognise my config file at all...

[laurisbernhart]

Would need ES6/Typescript too! Any update on this?

[finnmerlett]

I wouldn't hold out on it. Instead, keep any constants you want to import into your tailwind.config.js in .js files themselves. If you turn on checkJs in your tsconfig, you can still have full type-checking and type interpolation, as well as import the js-file constants into any js or ts file. You can fill in any gaps in the type-interpolation using JSDoc, which is interpreted as typing by typescript too.

Not worth the fight to get config files in Typescript in my opinion.

[laurisbernhart]

@finnmerlett Didnt know about "checkJs" – thank you! Gonna keep it simple as you suggest.
Thing is I would have liked to simply import my current styled-components theme.. while migrating to tailwind – without refactoring shared parts into separate files before.

[finnmerlett]

Yeah I had the exact same issue, I'd started with styled-components and wanted to move to tailwind with a shared theme. It's not too much trouble to extract the constants such as colours and spacing into separate js files, then import them into both tailwind config and styled-components setup. If anything you can think of it as a nice abstraction / separation of code concerns 😉

Almost all config files I've seen don't support typescript - CapacitorJs is the only one that I've come across. But thanks to Typescript and VSCode's excellent tooling and support of JSDoc you can work around basically any issues you come across, and come out the other side with fully typed variables.

[bradlc]

Hey @jd-0001. I'm doing some issue/PR tidy up and I'm going to close this one because I don't really consider this an "issue" per se. Although you can use ESM config files with some setups (for example with Vite like you mentioned), this is not supported by Tailwind CSS natively, and so we don't support it in Tailwind CSS IntelliSense either. When/if we add ESM support to Tailwind itself we will be sure to support this in Tailwind CSS IntelliSense as well 👍

[acurrieclark]

After I had set up tailwind with Vite with a .cjs config file, I attempted to add the @tailwindcss/forms plugin by including require("@tailwindcss/forms") to my config plugins. This resulted in a

Dynamic require of "@tailwindcss/forms" is not supported

error.

I then adapted my config to work as a module instead, updated the file extension to .js and tried again. Vite had now problems, but I encountered the above issue.

So, while this might seem like utter madness, I ended up with 2 different tailwind.config files.

The first is a tailwind.config.cjs which is read by my editor:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{html,svelte,js,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {},
  },
  darkMode: "media",
};

Then I have a tailwind.config.mjs which I use for exporting the config:

import forms from "@tailwindcss/forms";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{html,svelte,js,ts}"],
  theme: {
    extend: {},
  },
  plugins: [forms],
  variants: {
    extend: {},
  },
  darkMode: "media",
};

Note that this other file has a .mjs extension. Hope that helps someone else!

[lk77]

I had the same issue, and the solution i came up with is to import the config myself instead of passing the filename :

import tailwindcss from 'tailwindcss'
import tailwindConfig from './tailwind.config.js';
export default {
    plugins: [
        tailwindcss(tailwindConfig)
    ]
}