javascript - How to import ES module in Tailwind config file? - Stack Overflow

admin管理员组

文章数量:1312773

I am configuring my own plugins in Tailwind config file by import ES module with CommonJS syntax require('/my-plugin'); but I get an error when trying to build:

SyntaxError: Cannot use import statement outside a module
    at pileFunction (<anonymous>)

Since I am using ES6 statements in the my-plugin file (e.g import, export default) so these causing to throw errors even though I use regular require statements to import it in my Tailwind config file.

How do I resolve this problem?

My code:

tailwind.config.js

const myPlugin = require('./my-plugin');

module.exports = {
    mode: 'jit',
    darkMode: 'class',
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './ponents/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
    }   
    plugins: [
        myPlugin(),       
    ],
};

./my-plugin

import ... from ...

const MyPlugin = () => {}

export default MyPlugin 

I am configuring my own plugins in Tailwind config file by import ES module with CommonJS syntax require('/my-plugin'); but I get an error when trying to build:

SyntaxError: Cannot use import statement outside a module
    at pileFunction (<anonymous>)

Since I am using ES6 statements in the my-plugin file (e.g import, export default) so these causing to throw errors even though I use regular require statements to import it in my Tailwind config file.

How do I resolve this problem?

My code:

tailwind.config.js

const myPlugin = require('./my-plugin');

module.exports = {
    mode: 'jit',
    darkMode: 'class',
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './ponents/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
    }   
    plugins: [
        myPlugin(),       
    ],
};

./my-plugin

import ... from ...

const MyPlugin = () => {}

export default MyPlugin 

• javascript
• node.js
• reactjs
• next.js
• tailwind-css

Share Improve this question Follow asked Apr 14, 2023 at 19:56 EppleEpple 98211 gold badge1212 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Ensure you:

• Are running Tailwind v3.3+ for configuration file ESM format support
• Use the mjs extension for tailwind.config.mjs instead of tailwind.config.js if you do not have "type": "module" in the project's package.json
• Use ESM syntax in the configuration file
• Add a ma after the theme object declaration
• Do not execute the imported plugin function

import myPlugin from './my-plugin';

export default {
    mode: 'jit',
    darkMode: 'class',
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './ponents/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
    },
    plugins: [
        myPlugin,       
    ],
};

本文标签： javascriptHow to import ES module in Tailwind config fileStack Overflow