Webpack Shell Plugin Next build commands ThemeKit HRM & TailwindCSS

I need help setting up Hot Module Reloading with Webpack and Shopify ThemeKit. Using Webpack Shell Plugin Next I am trying to execute the following steps.

1. Start Webpack and Watch for Changes
2. Build TailwindCSS
3. Deploy Theme
4. Open Theme
5. Watch Theme for Changes

Here is my current setup which does not trigger a rebuild on file change and saves for hot module reloading.

package.json

"scripts": {
    "start": "NODE_ENV=development webpack --watch"
},

webpack.config.js

// Run Shell commmands during Webpack operations
if (mode === 'development') {
    module.exports.plugins.push(
      new WebpackShellPluginNext({
        onBuildStart:{
          scripts: ['echo -- Webpack build started '],
          blocking: true,
          parallel: false
        },
        onBuildError:{
            scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
        }, 
        onBuildEnd:{
          scripts: [
              'echo -- Webpack build complete ✓',
              'echo -- Building TailwindCSS...',
              'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
              'echo -- Deploying to theme ✈️',
              'shopify-themekit deploy',
              'echo -- Deployment competed ✓',
              'shopify-themekit open',
              'shopify-themekit watch'],
          blocking: true,
          parallel: false
        }
      })
    )
  }

The current setup builds and deploys correctly but there is no reloading when changing and saving files. I tried various order of operations and api's from the Webpack Shell Plugin Next but I am stuck to find the right combination.

Here is a link to the full repo: Shopify ThemeKit with Webpack 4