I am building a project using Laravel/Inertia/Vue and I am using Tailwind CSS. I want to have separate admin.css and client.css files using tailwindcss 3.2 ability to have multiple config files:

./styles/admin.css

@config "./tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

but the problem is that Vite will build just app.css for me not the admin one

vite.config.js

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',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
    server: {
        host: "localhost",
    },
});

app.css is imported in app.js

I can not figure it out
Could you please help me?

I want to have separate admin.css and client.css files per each tailwindcss config file.

CodePudding user response：

You can pass an array of input files to vite as follows:

input: ['resources/js/app.js','resources/css/admin.css','resources/css/client.css']

This should result in seperate output files in your build directory.

If you want to keep the css as javascript import you can create a second InertiaApp for the admin area:

1. Copy app.js and rename it like 'admin.js'
2. Change css import in admin.js to '/styles/admin.css'
3. Change your vite input to: input: ['resources/js/app.js','resources/js/admin.js']
4. Use a different blade layouts for the 'admin' area with reference to admin.js instead of app.js : @vite('resources/js/admin.js')

CodePudding user response：

Thanks @kissu for your answer. Here are some more things: I can split javascript application by defining multiple rootViews using [email protected] in HandleInertiaRequests.php middleware:

public function rootView(Request $request)
{
   if ($request->routeIs('admin.*')) {
      return 'admin';                 
   }
  return 'app';
 }

And have two different apps.

But do you think its a good approach to have two different apps? I like the separation idea but is it the right way? I Also have concerns about bundling and mixing in inertia and ssr, would it be a problem for that when you have two apps? I dont know anything about inertia's way of working

I was hoping there is some other method like creating a higher order component or something like that. I am very new to Vue world and I am still trying to learn.