[vite] Internal server error: Cannot read properties of undefined (reading 'length') for Tailwind and PostCSS.

#tailwindcss #postcss #vite #config

Disclaimer: this is not a fix but rather a quick hack, so that, for instance, you might continue building.

Problem: You've just installed TailwindCSS but you get the error below as well as some indication that it might related to the PostCSS config.

$ [postcss] Cannot read properties of undefined (reading 'config')
$ [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')

Quick Hack: Copy the content of module.export in the tailwind.config.js file into the value of the tailwindcss property in the postcss.config.js file. Your final result should look like this:

./postcss.config.js

1  module.exports = {
2   plugins: {
3    tailwindcss: {
4       content: [
5         "./index.html",
6         "./src/**/*.{vue,js,ts,jsx,tsx}",
7       ],
8       theme: {
9         extend: {},
10      },
11      plugins: [
12        require('@tailwindcss/forms'),
13      ],
14    },
15    autoprefixer: {},
16  },
17 }

That should do the hack. Cheers.

Top comments (7)

glocore • May 14 '23

I'm able to require my tailwind config into postcss config like this:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: require("./tailwind.config.js"),
    autoprefixer: {},
  },
};

Claudio Terogene • Apr 17 '23

Yes it work. Thank youuu.

Kamran Zeynalov • Mar 7 '23

yes, it did work for me too! Thanks!

Jegede Ayodeji O • Jan 15 '23

Does it for me. Thanks man

mahammadmansur95 • Dec 11 '22

It was helpful. Thanks bro
But i got one error "No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration."

Alex Bruno Cáceres • Jun 23 '23

Today it was necessary to revert this setup in my project by splitting PostCSS and Tailwind CSS configs into two separate files again. After a dependencies update.