Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

@julienbourdeau julienbourdeau commented Apr 20, 2020

This is based on Jeffrey's comment here: JeffreyWay/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

This comment has been minimized.

Copy link

@pyr0hu pyr0hu commented Apr 20, 2020

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

@julienbourdeau

This comment has been minimized.

Copy link
Owner Author

@julienbourdeau julienbourdeau commented Jul 27, 2020

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

This comment has been minimized.

Copy link

@saeedvaziry saeedvaziry commented Oct 30, 2020

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