Tailwind didn't load new classes with 'npx mix watch' Command after changes.

[ingamartinez]

• Laravel Mix Version: laravel-mix@6.0.49 (npm list --depth=0)
• Node Version (node -v): v14.19.0
• NPM Version (npm -v): 6.14.16
• OS: Windows on Linux WSL2

Description:

The problem is when I try npx mix watch the first compilation is Ok, but if I change any class, the console shows me is compiling, but when it finish and go to the browser, the new class didn't load.
If I stop the command, and load it again, that new class now is showing. I don't know what else to do to fix this.

tailwing.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './resources/**/*.{php,js,vue}',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        'primary': { '50': '#F6F5FF', '100': '#EDEBFE', '200': '#DCD7FE', '300': '#CABFFD', '400': '#AC94FA', '500': '#9061F9', '600': '#7E3AF2', '700': '#6C2BD9', '800': '#5521B5', '900': '#4A1D96' },
        'custom-green': '#66bb6a',
        'bulma-primary': { '600': '#00c4a7', '700': '#1ccba0' }
      }
    },
    fontFamily: {
      'body': [
        'Inter',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'system-ui',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji'
      ],
      'sans': [
        'Inter',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'system-ui',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji'
      ],
      'graphik': [
        'Graphik'
      ]
    },
    boxShadow: {
      'htrCustomShadow1': '0 2px 36px 0px rgba(0, 0, 0, 0.13)',
      'htrCustomShadow2': '0 2px 11px 0px rgba(0, 0, 0, 0.24)'
    }
  },
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
    require('flowbite/plugin')
  ]
}

webpack.mix.js

const mix = require('laravel-mix')
const webpack = require('webpack')
const tailwindcss = require('tailwindcss')
var LiveReloadPlugin = require('webpack-livereload-plugin');

mix.browserSync({
  proxy: 'http://127.0.0.1:8000',
  files: [
    'public/**/**',
    'resources/**/**',
    '**/*.php',
  ],
});

mix.options({
  processCssUrls: false,
})
  .js('resources/assets/js/admin/app.js', 'public/js/admin.js').vue({ version: 2 })

  .postCss('resources/assets/css/admin/app.css', 'public/css/admin_tailwind.css',[
    require('postcss-import'),
    require('autoprefixer'),
    require("tailwindcss")
  ])
  .sourceMaps(true, 'source-map')
  .version()

mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': mix.inProduction() ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
    }
  },
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ]
})

UPDATE: if I add cache: false to the mix.webpackConfig it works, but take a lot of time to recompile again.

UPDATE2: this is my app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

If I add an space and let the watch compile again, it load new clases, one change to this file makes the watch compiler load the new ones.

[maxxscho]

Same here - since a long time. No possible fix on my side worked.