In Vite2, How to import an ESModule in tailwind.config.js

user_12131481 0
Viewed 6947

Building a Vite2 app.

tried to import an ESModule in tailwind.config.js. The Module was exported like:

export default xxx;

Then I imported the module in tailwind.config.js like:

const xx = require('./xx/xxx');

But I got an Error:

[plugin:vite:css] Cannot use import statement outside a module

How do I fix this?

vite tailwind-css javascript
1 Answers

I got an answer from Vite Discord channel. This is the solution to convert postcss and tailwindcss config files to ESModule.

Do this, and you can use import in those config files.

tailwind.config.js

export default {
  purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
}

vite.config.js I added import postcss from './postcss.config.js' and

css: {
  postcss,
},
user_121314810
Related