JSFiddle - React, Tailwind, and code Playground

CSS

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function (paths) {
  return {
    module: {
      rules: [
        {
          test: /\.scss$/,
          include: paths,
          use: [
            {
              loader: MiniCssExtractPlugin.loader({
                options: {
                  publicPath: "../",
                },
                fallback: "style-loader",
                use: ["css-loader", "sass-loader"],
              }),
            }
          ],
        },
        {
          test: /\.css$/,
          include: paths,
          use: [
            {
              loader: MiniCssExtractPlugin.loader({
                fallback: "style-loader",
                use: "css-loader",
              }),
            },
          ],
        },
      ],
    },
    plugins: [new MiniCssExtractPlugin("./css/[name].css")],
  };
};

JavaScript

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge");
const pug = require("./webpack/pug");
const devserver = require("./webpack/devserver");
const sass = require("./webpack/sass");
const css = require("./webpack/css");
const extractCSS = require("./webpack/css.extract");

const PATHS = {
  source: path.join(__dirname, "src"),
  build: path.join(__dirname, "build"),
};

const common = merge([
  {
    entry: PATHS.source + "/index.js",
    output: {
      path: PATHS.build,
      filename: "[name].js",
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: PATHS.source + "/index.pug",
      }),
    ],
  },
  pug(),
]);

module.exports = function (env) {
  if (env === "production") {
    return merge([common, extractCSS()]);
  }
  if (env === "development") {
    return merge([common, devserver(), sass(), css()]);
  }
};