17

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?

Shook Lyngs
  • 1,093
  • 2
  • 10
  • 19

1 Answers1

36

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,
},
wandarkaf
  • 1,839
  • 20
  • 30
Shook Lyngs
  • 1,093
  • 2
  • 10
  • 19
  • Thank you for this! – tptcat Dec 07 '21 at 23:04
  • 1
    Thank you very much! BTW, can use `.mjs` extension for webpack: `await import('./postcss.config.mjs').then((m) => m.default)` – daskyrk Jan 11 '22 at 11:49
  • 2
    I wonder why the Tailwind Vue 3 and Vite official installation guide https://tailwindcss.com/docs/guides/vite doesn't mention these essential steps? – abulka May 25 '22 at 01:25
  • Indeed it seems to work even though Tailwind authors say it's not supported https://github.com/tailwindlabs/tailwindcss/issues/8029#issuecomment-1086875656 – Priit Jul 19 '22 at 12:08
  • It's not worked for me unfortunately, glad you got it fixed though. – Lauro235 Aug 23 '23 at 00:14