Reuse main.css across multiple pages without importing the entirety of tailwind in all files

[smac89]

I have a main.css file containing the base tailwind directives:

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

Now I have multiple html files which also use tailwind css, so I create seperate css files for each of them which looks something like this:

@import "~styles/main.css";

@layer base {
    body {
        @apply bg-[#192144];
    }
}

The problem I'm having is that vite/tailwind generates the entirety of the tailwind components for each and every file, rather than reusing the one from main.css.

How do I configure vite not to do this? I am looking to have the following generated for each of the extra css files

@import "/path/to/final/bundle-main.css";

/* whatever else tailwind wishes to generate here... */

Is this possible?