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

Question

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")],
}

Answer 1

I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using #config <filename>:
app.css
#config "./tailwind.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
mail.css
#config "./tailwind.mail.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
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,
})
]
})