How to Resolve 'module is not defined' in Tailwind CSS

If you're encountering the "module is not defined" error while working with Tailwind CSS 3.3.2, you’re not alone. This issue often arises when using the tailwind.config.js file in environments where the Node.js-specific module.exports is not properly recognized. Below, we’ll walk you through the reasons for this error and provide actionable solutions.

The Problem

The error appears when you add the following code to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

You might see a red squiggly line under module with the error message:

'module' is not defined.

This issue is typically caused by ESLint’s no-undef rule, which does not recognize Node.js-specific globals in certain configurations.

Solutions

Here are three ways to resolve this issue:

1. Specify the Node.js Environment in ESLint

Add the following comment at the top of your tailwind.config.js file:

/* eslint-env node */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

This tells ESLint that the file is meant to run in a Node.js environment, resolving the error.

2. Use export default Instead of module.exports

If your project is using ES Modules (e.g., with a type: "module" in your package.json), you can rewrite the configuration as:

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

This approach leverages modern JavaScript syntax and ensures compatibility with ES Modules.

3. Check Your ESLint Configuration

Ensure your .eslintrc.js file includes the following configuration to recognize Node.js globals:

module.exports = {
  env: {
    node: true,
  },
}

This global setting makes ESLint aware of Node.js-specific features like module and require.

FAQ

1. Why does the tutorial work without this error?

The tutorial might assume that your environment already has the appropriate Node.js or ESLint settings. Double-check your setup to ensure it matches the tutorial’s prerequisites.

2. Can I use both module.exports and export default?

No, you should use one or the other depending on your project setup. Use module.exports for CommonJS projects and export default for ES Module projects.

3. Is this issue specific to Tailwind CSS?

No, this issue is related to JavaScript module systems and linting configurations. It can appear in other contexts where module.exports or export default is used incorrectly.

4. How do I verify my project type (CommonJS or ES Module)?

Check your package.json file. If it contains "type": "module", your project is using ES Modules. If not, it defaults to CommonJS.