CODEWITHSUNDEEP
laravelconfigtailwind-cssvite
Código Móvil
Código Móvil

Reputation: 31

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

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/**',
      ],
    }),
  ],
});

Upvotes: 3

Views: 4189

Answers (3)

Tudor
Tudor

Reputation: 1898

Starting with Tailwind CSS v3.2, hacky workarounds are no longer needed. You can now define the config file to use inside of your CSS files:

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

/* Styles for client (main site) */
@config "./tailwind.client.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config

Upvotes: 1

pkfan
pkfan

Reputation: 19

Create two vite.config.js files, and also create two tailwind.config.js files for frontend & backend.

I have already posted this solution on github with demo laravel project.

https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js

I have upload a video about it. watch this video on youtube

Upvotes: 0

ceejayoz
ceejayoz

Reputation: 179994

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.

Upvotes: 0

Related Questions