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

Question

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

Amade · Accepted Answer · 2024-05-24 19:37:58Z

1

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

edited May 24, 2024 at 19:37

Amade

4,0182 gold badges30 silver badges55 bronze badges

answered Feb 1, 2023 at 11:01

Tudor

1,8983 gold badges13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ceejayoz · Accepted Answer · 2022-07-18 21:00:14Z

0

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.

answered Jul 18, 2022 at 21:00

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Comments

pkfan · Accepted Answer · 2022-09-18 06:43:12Z

0

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

edited Sep 18, 2022 at 6:43

answered Sep 5, 2022 at 11:40

pkfan

194 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related