Not able to use tailwind css classes in an existing angular project which is using scss

Question

I'm trying to use tailwind css classes in an existing angular project which is using scss. I'm new to angular, tailwind and sass so help would be greatly appreciated. I tried these guides but they did not work https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45 Tailwind's official documentation to integrate with preprocessors Stack overflow answer on a similar problem . Here's what I did

• imported tailwind in styles.scss which is in the root of my project

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

tried importing the default way too

@tailwind base;
@tailwind components;
@tailwind utilities;

• edited tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  important: true,
  theme: {
    extend: {},
  },
  plugins: [],
}

added important: true to override scss styling

• tried to use @angular-builders/custom-webpack. Added it in angular.json and received this error

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

-I'm getting this warning when I re build the app after importing tailwind

Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

I'm using angular@14.

Expected to use tailwind css classes.