Webpack with yarn react tailwind, yarn build won't load css files

Question

I am using webpack, yarn, react from scratch, and tailwind. In dev mode everything works, but in production mode my app won't load tailwind css styles at all. I can't get the scripts to work in my package.json file, and I think that my webpack.prod.js configurations are the problem. Please help me!

This is my webpack.common.js file

const path = require("path");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist' ),
    filename: 'bundle.js'
  },

  module: {
    rules: [
    {
      test: /\.css$/,
      use: ['style-loader',
      { loader: 'css-loader', options: {importLoaders: 1}
        },
        'postcss-loader'
      ]
    },
    {
      test:  /\.js$|jsx/,
      exclude:
        /node_modules/,
      use: {
        loader:
          'babel-loader',
        options: {
          presets: [
            '@babel/preset-react',
            '@babel/preset-env',
          ],
          plugins: [
            '@babel/plugin-transform-runtime',
          ],
        },
        
      },
    },  
    ],
  },
  
};

This is my webpack.dev.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');

const {
  merge,
} = require('webpack-merge');


const commonConfig = require('./webpack.common');


const devConfig = {
  mode: 'development',
  devServer: {
    port: 8001,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:
        './dist/index.html',
    }),
    
  ],
};


module.exports = merge(
  commonConfig,
  devConfig
);

This is my webpack.prod.js file

const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
      chunkFilename: '[id].css',
    }),
  ],
}
);

And this is my package.json file

{
  "name": "llll",
  "version": "1.0",
  "description": "Taxes Calculator",
  "main": "index.js",
  "author": "lll",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.prod.js && watch:css",
    "start": "webpack-dev-server --config webpack.dev.js && watch:css",
    "watch:css": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  },
  "dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.5",
    "webpack": "^5.75.0",
    "webpack-merge": "^5.8.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@types/mini-css-extract-plugin": "^2.5.1",
    "autoprefixer": "^10.4.13",
    "css-loader": "^6.7.2",
    "mini-css-extract-plugin": "^2.7.2",
    "postcss": "^8.4.20",
    "postcss-cli": "^10.1.0",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^7.8.3",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.2.4",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}