Build separate CSS files using Tailwindcss and laravel-vite-plugin

I'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.
The two css files use different configuration, but I have no idea how specify the correct tailwind.config.js for each builds.

• app.css should use tailwind.config.js
• mail.css should use tailwind-mail.config.js

vite.config.js

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
            refresh: true,
        })
    ]
})

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    theme: {},
    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
}

tailwind-mail.config.js

module.exports = {
    content: ["./resources/views/mails/**/*.blade.php"],
    theme: {},
    plugins: [require("@tailwindcss/typography")],
}