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)
I'm able to
require
my tailwind config into postcss config like this:Yes it work. Thank youuu.
yes, it did work for me too! Thanks!
Does it for me. Thanks man
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."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.
Thank you man..It does work for me..❤️❤️