I can't seem to make tailwind css work with my phoenix/react project

Hello all,
I need help with my Tailwind setup. Disclaimer I am a bit of a newbie in the whole asset management thing so to anybody answering please be explain any suggestions, thanks in advance.

So I have created a phoenix project which resides within an umbrella project with sole purpose to serve my react app.

The whole setup seems it is working fine when developing the react app but my lack of understanding in the webpack and in general asset management field is proved to be a burden now that I need to set up tailwind css to React project. I am working with Phoenix 1.5.7 webpack 4.41.5 sass-loader 8.0.2 postcss-loader 4.2.0

My webpack config looks like this

const path = require('path');  
const glob = require('glob');  
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
  
module.exports = (env, options) => {
  const devMode = options.mode !== 'production';
  
  return {
    optimization: { 
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new OptimizeCSSAssetsPlugin({}) 
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: { 
      filename: '[name].js',   
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'       
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: { 
      rules: [ 
        {
          test: /\.js$/,
          exclude: /node_modules/,        
          use: {
            loader: 'babel-loader'          
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
              'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../js/Main.scss' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
  }
};

My postss.config.js looks like this

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

My tailwind.config.js looks like this

module.exports = {
  content: [
    "./js/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And all the react code resides within the /js folder.

After all I am trying to use tailwind by importing tailwind components in a file called Main.css

@tailwind base;

@tailwind components;

@tailwind utilities;

which I then import to my react app base file Main.js

I would greatly appreciate if anybody that can even identify what looks off with my set up and direct me to any kind of sources .