DEV Community

Kenneth Isaac
Kenneth Isaac

Posted on

[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')
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

That should do the hack. Cheers.

Top comments (7)

Collapse
 
glocore profile image
glocore •

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: {},
  },
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ayodejipy profile image
Jegede Ayodeji O •

Does it for me. Thanks man

Collapse
 
mahammadmansur95 profile image
mahammadmansur95 •

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."

Collapse
 
cterogene profile image
Claudio Terogene •

Yes it work. Thank youuu.

Collapse
 
neo_the_coder profile image
Kamran Zeynalov •

yes, it did work for me too! Thanks!

Collapse
 
farhadalam profile image
Farhad Hossain •

Thank you man..It does work for me..❤️❤️

Collapse
 
alexbruno profile image
Alex Bruno Cáceres •

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.