Skip to content

Instantly share code, notes, and snippets.

@julienbourdeau
Created April 20, 2020 06:43
Show Gist options
  • Save julienbourdeau/a7e0c8be740d57c705b75b5dd6d53f2f to your computer and use it in GitHub Desktop.
Save julienbourdeau/a7e0c8be740d57c705b75b5dd6d53f2f to your computer and use it in GitHub Desktop.
Laravel Mix with multiple Tailwind config and PurgeCSS (separate Admin dashboard and Front app)
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const rootPath = Mix.paths.root.bind(Mix.paths);
const tailwindPlugins = function(configFile, paths) {
const pluginList = [tailwindcss(configFile)];
if (mix.inProduction()) {
pluginList.push(require('@fullhuman/postcss-purgecss')({
content: paths.map((path) => rootPath(path)),
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/]
}))
}
return pluginList;
}
mix
.js('resources/js/front/front.js', 'public/js/')
.sass(
'resources/css/front.scss',
'public/css/',
{},
tailwindPlugins(
'resources/css/tailwind.front.config.js',
[
'resources/views/front/**/*.html',
'resources/views/front/**/*.php',
'resources/js/front/**/*.vue',
]
)
)
.sass(
'resources/css/admin.scss',
'public/css/admin/',
{},
tailwindPlugins(
'resources/css/tailwind.admin.config.js',
[
'resources/views/components/admin/**/*.php',
'resources/views/admin/**/*.html',
'resources/views/admin/**/*.php',
'resources/views/auth/**/*.html',
'resources/views/auth/**/*.php',
'resources/js/admin/**/*.vue',
]
)
)
.options({
processCssUrls: false,
})
.browserSync('boucherie.test');
if (mix.inProduction()) {
mix.version();
}
@julienbourdeau
Copy link
Author

This is based on Jeffrey's comment here: laravel-mix/laravel-mix#1688 (comment)
The PurgeCSS config is based on https://github.com/spatie/laravel-mix-purgecss

Looking at the solution, it seems easy but getting PurgeCSS to work properly took me some time.

Before that I tried something where I passed a mode ENV_MODE=front yarn prod and configuration was changing depending on the env var. I ran it once for front, once for admin but it was overriding the mix-manifest.json.
It wasn't so bad, until I enabled mix.version() 💥 😓

So I finally took the time to make it work properly.

Screenshot 2020-04-20 at 08 46 51

Screenshot 2020-04-20 at 08 53 20

(yes, I use a light background for my terminal)

@pyr0hu
Copy link

pyr0hu commented Apr 20, 2020

(sorry to off, what color scheme is this?)

@julienbourdeau
Copy link
Author

I forgot what was the the orignal theme but here is an export of my config: https://www.dropbox.com/s/7ll6punehfi2qq4/SigTerm.itermcolors?dl=0

Good light theme are increasingly hard to find, especially for consoles 😞

@saeedvaziry
Copy link

If you're looking for a simple way

mix.sass('resources/sass/app.scss', 'public/css', {}, [
    tailwindcss('./tailwind.config.js')
]).options({
    processCssUrls: false,
});

mix.sass('resources/sass/admin.scss', 'public/css', {}, [
    tailwindcss('./tailwind-admin.config.js')
]).options({
    processCssUrls: false,
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment