[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')

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.

Comments

[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: {},
  },
};

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

[Jegede Ayodeji O]

Does it for me. Thanks man

[Claudio Terogene]

Yes it work. Thank youuu.

[Kamran Zeynalov]

yes, it did work for me too! Thanks!

[Farhad Hossain]

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

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