css layer order wrong | Vite Land | Page 1

I even tried changing to just plain css insead of scss, like this:

@layer bootstrap, bootstrap-vue, bootstrap-overrides, tailwind-base, primevue, tailwind-utilities;

@import 'bootstrap/dist/css/bootstrap.css' layer(bootstrap);
@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css' layer(bootstrap-vue);

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

Still Chrome says the order is different as shown in screenshot.

#css layer order wrong