How to convert postcss.config.js and tailwind.config.js to ES modules?

Question

I created a new Vue app using Vite via npm init vue@latest. I added TailwindCSS to the project based on the official guide.

Running npm run lint throws errors

error 'module' is not defined no-undef

because it wants postcss.config.js and tailwind.config.js to be ES modules (I think).

When converting postcss.config.js from

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

to

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

and tailwind.config.js from

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

to

export const content = ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"];
export const theme = {
  extend: {},
};
export const plugins = [];

and running npm run dev the app crashes with the error

[vite] Internal server error: Unexpected token 'export' Plugin: vite:css

How do I solve this linting error?

Answer 1

You can actually keep those config files as CommonJS. ESLint's env needs to be set to node in those config files because Node is the actual environment during the build.

Option 1: Use inline comment to configure ESLint

Insert this comment at the top of postcss.config.js and tailwind.config.js:

/* eslint-env node */

Option 2: Configure env for *.config.js

Configure overrides to set env for *.config.js files:

// .eslintrc.cjs
module.exports = {
  ⋮
  overrides: [
    {
      files: ['*.config.js'],
      env: {
        node: true,
      },
    },
  ],
}

If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.

Option 3: Disable ESLint rules for *.config.js

Configure ignorePatterns to not lint these config files:

// .eslintrc.cjs
module.exports = {
  ⋮
  ignorePatterns: ['*.config.js'],
}

If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.