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),
        },
    };
}

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.