jit mode, compile 2 times

[jskorlol]

jit mode, compile 2 times.
I don't know why.

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

module.exports = {
  mode: 'jit',
  purge: [
      './resources/**/*.{js,vue,blade.php}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
        fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        },
        screens: {
            'print': {'raw': 'print'},
            // => @media print { ... }
        },
        fontSize: {
            'xxs': '.65rem',
        }
    },
  },
  variants: {
    extend: {
        opacity: ['disabled'],
    },
  },
  plugins: [
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/aspect-ratio'),
  ],
}

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

/*
 |--------------------------------------------------------------------------
 | 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')
//     .postCss('resources/css/app.css', 'public/css', [
//         //
//     ]);

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .options({
        processCssUrls: false,
    })
    .sourceMaps();

mix.js('resources/js/alpine.js', 'public/js')
   .js('resources/js/defer.js', 'public/js')
   .copy('resources/js/keypress.js', 'public/js');

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

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "TAILWIND_MODE=build mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/aspect-ratio": "^0.2.1",
        "@tailwindcss/forms": "^0.3.3",
        "@tailwindcss/typography": "^0.4.1",
        "autoprefixer": "^10.2.6",
        "axios": "^0.21.1",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.22",
        "lodash": "^4.17.21",
        "postcss": "^8.3.5",
        "resolve-url-loader": "^4.0.0",
        "tailwindcss": "^2.2.2",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@ryangjchandler/spruce": "^2.6.3",
        "alpine-magic-helpers": "^0.3.5",
        "alpine-turbolinks-adapter": "^0.3.0",
        "alpinejs": "^2.8.2",
        "autonumeric": "^4.6.0",
        "flatpickr": "^4.6.9",
        "fuse.js": "^6.4.6",
        "livewire-sortable": "^0.2.2",
        "postcss-import": "^14.0.2",
        "sweetalert2": "^10.16.2",
        "tippy.js": "^6.3.1",
        "turbolinks": "^5.2.0"
    }
}

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

When npm run dev with jit mode turned on. The design is broken because it compiles twice.
did i do something wrong ?

So, !important is added to the contents of @base...

please help me !!

[jskorlol]

#4714

Currently the same as this issue.

[jskorlol]

maybe my problem is
#4746
I think it will be like