Laravel vite config using separate tailwind.config files for admin and site

user_19409763 0
Viewed 596

With Laravel Mix I'm generating two different css/js files for Admin and for the main site like this:

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.js('resources/js/site/app.js', 'public/js')
  .postCss('resources/css/site/app.css', 'public/css', [
    require('autoprefixer'),
    require('postcss-import'),
    tailwindcss('./tailwind.site.config.js'),
  ])
  .options({
    processCssUrls: false,
  }).version();

mix.js('resources/js/admin/app.js', 'public/_admin/js')
  .postCss('resources/css/admin/app.css', 'public/_admin/css', [
    require('autoprefixer'),
    require('postcss-import'),
    tailwindcss('./tailwind.admin.config.js'),
  ])
  .options({
    processCssUrls: false,
  }).version();

How can I tell vite to do the same thing ??

Thanks!!

The default vite.config.js is

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: [
        ...refreshPaths,
        'app/Http/Livewire/**',
      ],
    }),
  ],
});
vite tailwind-css laravel config
2 Answers
user_144294220

See https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html.

You will need to add a configuration to config/vite.php, create a new vite.back-office.config.ts file, pass the configuration name to the @vite directive and run slightly different development and build commands.

The docs are TypeScript-focused, but the same technique will work for your JS/CSS assets.

ceejayoz_19020100
Related