Tailwind styles not recompiling after watched Vue change

Hi guys! I hope you're well. So my problem is that when I'm trying to stylize Vue components, all classes that aren't already part of the compiled CSS do not work until I stop my npm run watch and restart it. I haven't encountered this issue in any past project, but here's our current Tailwind and Mix setup:

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',

  purge: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
  ],

  theme: {
    extend: {
      fontFamily: {
        sans: ['Mulish', ...defaultTheme.fontFamily.sans],
      },
    },
  },

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

webpack.mix.js

const mix = require('laravel-mix');

require('mix-tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
  .vue()
  .sass('resources/sass/app.scss', 'public/css')
  .tailwind()
  .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
  mix.version();
}

Thanks in advance!