DEV Community

Kenneth Isaac
Kenneth Isaac

Posted on

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

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

Collapse
 
farhadalam profile image
Farhad Hossain

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