What is the exact solution of using Tailwind 2 with Angular 11? I am just tired of finding proper solution. Nothing really works

I have tried a lot in last couple of weeks. I have wasted too much time to figure out. But, I am failed to find solution. Please help me.

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(customWebpackConfig).

This is the error I am facing now.

I have imported Tailwind properly.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

This is the package.json. I have tried by downgrade the postcss, postcss-loader. Nothing works.

"dependencies": {
    "@angular-builders/custom-webpack": "^11.0.0-beta.4",
    "autoprefixer": "^10.1.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-scss": "^3.0.4",
    "sass": "^1.27.0",
    "tailwindcss": "^2.0.2",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
  }

This is the webpack.config.js file

let sass;
try {
  sass = require('node-sass');
} catch {
  sass = require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  "postcss-import",
                  "tailwindcss",
                  "autoprefixer"
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};