Split css to use <link rel=preload> for fonts

I am using Tailwindcss with VueJS and Laravel-Mix (Webpack).

I'd like to use custom local fonts.

This is how I included them:

@layer base {

    /* ibm-plex-mono-100 - latin */
    @font-face {
        font-family: 'IBM Plex Mono';
        font-style: normal;
        font-weight: 100;
        src: local('IBM Plex Mono Thin'), local('IBMPlexMono-Thin'),
        url('../fonts/ibm-plex-mono-v5-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.woff') format('woff'), /* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ibm-plex-mono-v5-latin-100.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
    /* ibm-plex-mono-200 - latin */
    @font-face {
        font-family: 'IBM Plex Mono';
        font-style: normal;
        font-weight: 200;
        src: local('IBM Plex Mono ExtraLight'), local('IBMPlexMono-ExtraLight'),
        url('../fonts/ibm-plex-mono-v5-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.woff') format('woff'), /* Modern Browsers */ url('../fonts/ibm-plex-mono-v5-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ibm-plex-mono-v5-latin-200.svg#IBMPlexMono') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
}

Now my question: For performance reasons I'd like to preload my fonts using <link rel=preload>. Is it possible to split the generated css file into app.css and fonts.css?