Webpack + postcss Cannot read properties of undefined (reading: 'syntax') - tailwind-css

Question

I got an error with trying to compile css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'syntax')
Here is like the main css file looks looks like.
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
#import "tailwindcss/base";
/**
* Application styles
*/
/* Shared/Global */
#import "./shared/fonts.css";
#import "./shared/typography.css";
#import "./shared/global.css";
#import "./shared/grid.css";
#import './shared/vue-transitions.css';
#import './shared/cards.css';
#import './shared/forms.css';
#import './shared/pages.css';
/* Vendors */
#import "./vendors/simplebar.css";
#import "./vendors/vue-scrollbar.css";
/* Components */
#import "./components/button.css";
#import "./components/rte.css";
#import "./components/footer.css";
#import "./components/social-buttons.css";
#import "./components/navbar.css";
#import "./components/header.css";
#import "./components/breadcrumbs.css";
#import "./components/content-nav.css";
#import "./components/text.css";
#import "./components/text-image.css";
#import "./components/card.css";
#import "./components/crops.css";
#import './components/search-bar.css';
#import './components/custom-select.css';
#import './components/modal.css';
#import "./components/login.css";
#import "./components/download.css";
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
#import "tailwindcss/components";
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
#import "tailwindcss/utilities";
/**
* Use this directive to control where Tailwind injects the responsive
* variations of each utility.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
#import "tailwindcss/screens";
what is strange compiler goes ok when all the imports except tailwind ones are commented. So this is definitely some issue with the css import.
and here package.json for some reference what is used in the project
{
"name": "sg",
"version": "1.0.0",
"description": "sg",
"main": "src/main.js",
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"startproxy": "cross-env webpack-dev-server --open --mode development --env.development --env.useProxy --env.proxyUrl",
"build": "cross-env NODE_ENV=build webpack",
"publish": "cross-env NODE_ENV=publish webpack",
"test": "jest"
},
"keywords": [],
"author": "TC",
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#vue/babel-preset-app": "^4.5.4",
"#vue/test-utils": "^1.0.4",
"autoprefixer": "^10.0.2",
"axios": "^0.23.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.5.1",
"babel-loader": "^7.1.5",
"clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^5.1.0",
"cross-env": "^6.0.3",
"css-loader": "^1.0.1",
"cssnano": "^4.1.10",
"dotenv-webpack": "^1.8.0",
"eslint": "^5.10.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"file-loader": "^2.0.0",
"find-config": "^1.0.0",
"fs": "0.0.1-security",
"glob-all": "^3.2.1",
"html-loader": "^0.5.5",
"html-replace-webpack-plugin": "^2.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin": "^5.3.1",
"imagemin-webp": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"img-loader": "^3.0.0",
"jest": "^25.5.4",
"mini-css-extract-plugin": "^0.8.0",
"path": "^0.12.7",
"postcss": "^8.3.9",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-mixins": "^7.0.2",
"postcss-nested": "^5.0.1",
"postcss-simple-vars": "^6.0.2",
"purgecss-webpack-plugin": "^1.6.0",
"stylelint": "^13.6.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-webpack-plugin": "^1.2.3",
"url-loader": "^1.1.1",
"vue": "^2.6.12",
"vue-click-outside": "^1.1.0",
"vue-custom-scrollbar": "^1.4.1",
"vue-jest": "^3.0.6",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-fix-style-only-entries": "^0.4.0"
},
"dependencies": {
"#tailwindcss/typography": "^0.3.1",
"core-js": "^3.8.3",
"micromodal": "^0.4.10",
"regenerator-runtime": "^0.13.7",
"simplebar": "^5.3.6",
"tailwindcss": "^2.0.1",
"vuex": "^3.6.0"
}
}
any ideas?

Answer 1

downgrading to "postcss": "^8.2.1" solved the issue :)