Laravel, Vite, SSL Valet with Multiple Tailwind configs

filament.css

// this file is my perfered theme for Filement. Feel free to make it your own.

@import "../../vendor/filament/filament/resources/css/app.css";

@import "../../node_modules/tippy.js/dist/tippy.css";
@import "../../node_modules/tippy.js/themes/light.css";

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

button[disabled] {
    opacity: 0.5;
}

.filepond--root[data-style-panel-aspect-ratio] .filepond--drop-label {
    transform: translateY(-50%) !important;
    position: absolute;
    top: 50%;
}

.filament-main-topbar,
.filament-sidebar-header {
    @apply bg-white dark:bg-gray-800;
}

@screen lg {
    .filament-sidebar {
        @apply bg-transparent dark:!bg-transparent shadow-none lg:!border-r-0 rtl:lg:!border-l-0;
    }

    .filament-sidebar-header {
        @apply border-r rtl:border-l;
    }
}

.filament-sidebar-group > button {
    @apply outline-offset-8 rounded-sm;
}

.filament-sidebar nav li:not(.filament-sidebar-group) div {
    border-top: none;
}

.filament-sidebar-group button p {
    @apply text-primary-600 dark:!text-primary-500;
}

.filament-forms-section-component {
    @apply dark:!border-gray-700;
}

.filament-forms-section-header-wrapper {
    @apply bg-gray-50 dark:!bg-gray-900/75;
}

.filament-forms-section-content-wrapper {
    @apply border-t dark:border-gray-700;
}

.filament-versions-nav-component {
    @apply border-t-0;
}

[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select,
[type="checkbox"],
[type="radio"],
.filament-forms-repeater-component * {
    @apply !shadow-none;
}

.filament-forms-section-content {
    @apply p-4;
}

.filament-tables-icon-button-action {
    @apply -mx-1;
}

FilamentServiceProvider.php

<?php

namespace App\Providers;

use Filament\Facades\Filament;
use Illuminate\Foundation\Vite;
use Illuminate\Support\ServiceProvider;

class FilamentServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerTheme(
                app(Vite::class)('resources/css/filament.css', 'build/filament'),
            );
        });
    }
}

misc.php

// When referencing the files array be sure to include the build directory as the second argument to @vite

@vite(['resources/css/app.css', 'resources/js/app.js'], 'build/frontend')

package.json

{
    "private": true,
    "scripts": {
        "dev:filament": "TAILWIND_CONFIG=filament vite",
        "dev:frontend": "vite",
        "build:filament": "TAILWIND_CONFIG=filament vite build",
        "build:frontend": "vite build",
        "dev": "npm-run-all dev:*",
        "build": "npm-run-all build:*"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.3",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^0.27.2",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "npm-run-all": "^4.1.5",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "tippy.js": "^6.3.7",
        "vite": "^3.0.2"
    }
}

tailwind-filament.config.js

// Name this file as `tailwind-${name_of_css_file_in_resources/css}.config.js`
// Make sure there is a css file in resources/css. (ie. resources/css/filament.css)

const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./resources/**/*.blade.php", 
      "./vendor/filament/**/*.blade.php"
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                gray: colors.slate,
                danger: colors.rose,
                primary: colors.sky,
                success: colors.emerald,
                warning: colors.orange,
            },
        },
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
    ],
};

vite.config.js

import fs from "fs";
import { homedir } from "os";
import { resolve } from "path";
import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";

let inputs = [];
const host = "vitest.test";

if (process.env.TAILWIND_CONFIG) {
    inputs = [`resources/css/${process.env.TAILWIND_CONFIG}.css`];
} else {
    inputs = [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/push.js",
    ];
}

export default defineConfig({
    plugins: [
        laravel({
            input: inputs,
            refresh: true,
        }),
    ],
    server: detectServerConfig(host),
    css: {
        postcss: {
            plugins: [
                require("tailwindcss/nesting"),
                require("tailwindcss")({
                    config: process.env?.TAILWIND_CONFIG
                        ? `tailwind-${process.env.TAILWIND_CONFIG}.config.js`
                        : "./tailwind.config.js",
                }),
                require("autoprefixer"),
            ],
        },
    },
    build: {
        outDir: process.env?.TAILWIND_CONFIG
            ? `./public/build/${process.env.TAILWIND_CONFIG}`
            : "./public/build/frontend",
    },
});

function detectServerConfig(host) {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`);
    let certificatePath = resolve(
        homedir(),
        `.config/valet/Certificates/${host}.crt`
    );

    if (!fs.existsSync(keyPath)) {
        return {};
    }

    if (!fs.existsSync(certificatePath)) {
        return {};
    }

    return {
        hmr: { host },
        host,
        https: {
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    };
}

For windows users, install and use cross-env package.

"dev:filament": "cross-env TAILWIND_CONFIG=filament vite",
"build:filament": "cross-env TAILWIND_CONFIG=filament vite build",

Thanks @inerba. I appreciate the note.

I must say I have some problems: although it seems to work at first glance, I'm missing styles.
I also tried to launch two separate terminals with rpm run dev:frontend in one and dev:filament in the other, but as soon as the second command is launched, I loose some style in the frontend, and when only the first command is running, they are restored....

Yea, there's some bug in dev. Vite was not really designed to output multiple bundles, which is what makes it difficult to work with multiple tailwind config files.