[vite] Internal Server Error: Cannot read property of undefined (read ‘length’) for Tailwind and PostCSS.

Disclaimer: This is not a fix, but a quick hack, so that, for example, you can continue building.

Problem: You have just installed TailwindCSS but you get the below error as well as some indication that it may be related to PostCSS configuration.

$ [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 contents of module.export In tailwind.config.js file in the value of tailwindcss property in 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

This should be hacked. encourage.

Leave a Comment