Laravel/Inertia/Vue项目配置多Tailwind CSS构建文件求助

要让Vite同时构建admin.css和客户端的app.css，核心是在Vite配置中添加对应的入口资源，以下是两种可行方案：

方案一：直接将CSS文件作为Vite输入入口 #

修改vite.config.js中的Laravel插件配置，把admin.css加入到input数组中：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                './styles/admin.css', // 对应你的admin.css实际路径
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
    server: {
        host: "localhost",
    },
});

这样Vite会同时处理app.js（及其引入的app.css）和admin.css，生成对应的编译后文件。

方案二：创建独立的Admin JS入口文件 #

如果后续Admin端需要专属的JS逻辑，推荐这种方式：

1. 在resources/js目录下创建admin.js文件，引入admin.css：

import '../../styles/admin.css'; // 路径根据你的项目结构调整
// 可在此添加Admin端专属的JS代码

2. 修改vite.config.js的input配置，加入admin.js：

laravel({
    input: [
        'resources/js/app.js',
        'resources/js/admin.js',
    ],
    ssr: 'resources/js/ssr.js',
    refresh: true,
}),

Vite会打包admin.js并自动处理它引入的admin.css。

额外注意事项 #

• 确保admin.css中的@config "./tailwind.admin.config.js"路径正确，要对应tailwind.admin.config.js的实际位置。
• 在Admin页面的Blade模板中，通过@vite(['./styles/admin.css'])（或对应入口文件）引用编译后的资源。
• 确认tailwind.admin.config.js的content配置只包含Admin相关的文件，比如：

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/views/admin/**/*.blade.php",
        "./resources/js/Pages/Admin/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

内容的提问来源于stack exchange，提问作者Emma Traversy