Laravel-mix: PostCSS - Multiple config files

[Krato]

• Laravel Mix Version: 2.1.11
• Node Version (node -v): v6.14.1
• NPM Version (npm -v): 3.10.10
• OS: macOS High Sierra v10.13.5

Description:

Hi, I'm trying to use multiple tailwind.js config files using Laravel mix. But seems impossible.
Only works the first tailwind.js config file. And throws an error when in the second function I call a var from the second tailwind.js config file.

Is giving me an error in builder process. Can not find a class from './tailwind.js' file.

Some help?

Thanks

Steps To Reproduce:

This is my webpack.js:

let mix = require('laravel-mix');
let exec = require('child_process').exec;
let path = require('path');
let glob = require('glob');
var fs = require('fs');
let tailwindcss = require('tailwindcss');

// Urls 
let frameworkPath = "resources/framework/",
    themesPath    = "resources/themes/",
    modulesPath   = "resources/modules/**/",
    publicPath    = "public/themes/";
    tailwind_path = '';

    // Themes items
    let themes = glob.sync('resources/themes/*').map(function(componentDir) {
        return path.basename(componentDir);
    });


    themes.forEach(function(name) {
        let theme_path = 'resources/themes/'+name+'/assets/sass/style.scss';
        let tailwind_path = './tailwind.js';
        if (fs.existsSync(theme_path)) {

            tailwind_theme_path = 'resources/themes/'+name+'/tailwind.js';
            if (fs.existsSync(tailwind_theme_path)) {
                tailwind_path = tailwind_theme_path;
            }

            mix.sass(theme_path, 'public/themes/'+name+'/assets/css')
              .options({
                processCssUrls: false,
                postCss: [ 
                    // atImport(),
                    tailwindcss(tailwind_path) 
                ],
              }).version();
        }        
    });


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

[Krato]

Nothing?

[Krato]

No one? So is impossible to use mix with multiple tailwindcss configurations. :(

[rosswilson252]

@Krato It's a bit crude, however, I've managed to get it working by listening for the configReady event and then manually adding the tailwind config to the postcss plugins array:

Mix.listen('configReady', function (config) {

    [
        {
            resourcePath: 'resources/assets/sass/admin/admin.scss',
            tailwindPath: 'resources/assets/sass/admin/tailwind.js'
        },
        {
            resourcePath: 'resources/assets/sass/app/app.scss',
            tailwindPath: 'resources/assets/sass/app/tailwind.js'
        }
    ].forEach(addition => {

        let postCss = config.module
            .rules.filter(rule => rule.test === Path.resolve(__dirname, addition.resourcePath))[0]
            .use.filter(block => block.loader === 'postcss-loader')[0];

        postCss.options.plugins = [tailwind(addition.tailwindPath)].concat(postCss.options.plugins || []);
    });


});

To have it work with your setup you could add something like the following after you've defined your themes array:

Mix.listen('configReady', function (config) {

    themes.map(function (name) {
        let theme_path = 'resources/themes/' + name + '/assets/sass/style.scss';
        let tailwind_theme_path = 'resources/themes/' + name + '/tailwind.js';
        if (fs.existsSync(theme_path) && fs.existsSync(tailwind_theme_path)) {

            let postCss = config.module
                .rules.filter(rule => rule.test === Path.resolve(__dirname, theme_path))[0]
                .use.filter(block => block.loader === 'postcss-loader')[0];

            postCss.options.plugins = [tailwind(tailwind_theme_path)].concat(postCss.options.plugins || []);

        }
    });

});

[Krato]

@rosswilson252 bro, if this works you're a genius 🔥👏🏽.

Let me try. 😊👌🏽

[Neophen]

mix.listen is not a function?

[rosswilson252]

@Neophen listen() has been included since v1.0. Please make sure you're using an uppercase M for Mix.listen().

[njoguamos]

Having the same problem. Am trying to generate multiple theme files but am getting same colours for every theme. This is because the theme-config.js is being called once

// Available themes
const themes = ['green','dark','pink','orange','brown','purple','red'];

// Function to make theme
let makeTheme = (name) => {
  mix.sass(`resources/sass/themes/theme/${name}.scss`, 'public/css/theme')
  .version()
  .options({
    processCssUrls: false,
    postCss: [ 
      tailwindcss(`./resources/sass/themes/utilities/${name}-config.js`) 
    ],
  });
}

//Make theme files
themes.forEach(theme => {
  makeTheme(theme);
});

The theme files are being generated but have the same colours.

[JeffreyWay]

You can set multiple postcss plugins in the next release of Mix, coming this week.

mix.sass(
    'resources/assets/sass/app.scss', // src
    'public/css', // output
    {}, // sass-loader plugin options
    [ tailwindcss('tailwind.js') ] // postcss plugins
);

mix.sass(
    'resources/assets/sass/backend.scss', // src
    'public/css', // output
    {}, // sass-loader plugin options
    [ tailwindcss('backendtailwind.js') ] // postcss plugins
);

[dolbex]

@JeffreyWay - has this been included yet? If so, when I specify two the first .scss will not find it's custom rules. In your example anything from "tailwind.js" for "app.scss" that is different from backend will throw something like:

@apply` cannot be used with `.backend-bg-black` because `.backend-bg-black` either cannot be found,

If you set the prefix option in the tailwind config of one of them as I have you may see it.

[DougSisk]

@JeffreyWay your solution didn't work for me either.

[rosswilson252]

@DougSisk What version of Laravel mix are you using? What error are you getting? Are you able to show your webpack.mix.js file?

[DougSisk]

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

mix.js('resources/frontend/js/app.js', 'public/js')
    .sass(
        'resources/frontend/sass/styles.scss',
        'public/css',
        {},
        [tailwindcss('resources/frontend/tailwind.js')],
    )
    .copy('resources/frontend/img', 'public/img');

mix.js('resources/backend/js/app.js', 'public/backend/js')
    .sass(
        'resources/backend/sass/app.scss',
        'public/backend/css',
        {},
        [tailwindcss('resources/backend/tailwind.js')],
    )
    .copy('resources/backend/img', 'public/backend/img');

if (mix.inProduction()) {
    mix.version();
}

Error is:

(515:3) `@apply` cannot be used with `.text-pink-dark` because `.text-pink-dark` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.text-pink-dark` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tre

pink-dark is only defined in my frontend Tailwind file.

[rosswilson252]

@DougSisk Can you show the code where you're trying to use @apply?

[DougSisk]

It's not a problem with my code. It's a problem with Mix. It works fine when I run watch/hot mode and save the backend/frontend .scss files separately.

[pawelmysior]

I can unfortunately confirm what @DougSisk is saying. It's the same for me.

[mintcs]

Am also experiencing this issue with the latest 4.0.14 version. Tried nuking node_modules and reinstalling but that didn't help unfortunately. My code is similar though is using the postCss method.

mix
    .js('resources/assets/js/app.js', 'public/js')
    .postCss('resources/assets/css/app.css', 'public/css', [
        require('tailwindcss')('./tailwind.js')
    ]);
mix
    .js('resources/assets/website/js/app.js', 'public/website_app/js')
    .postCss('resources/assets/website/css/app.css', 'public/website_app/css', [
        require('tailwindcss')('./tailwind-website.js')
    ]);

[bhulsman]

Same issue here! It doesn't load the correct config file, so it seems.

[pawelmysior]

It looks like this problem was solved in version 4.0.15.

See this issue: https://github.com/JeffreyWay/laravel-mix/issues/2038. Here's the relevant commit: https://github.com/JeffreyWay/laravel-mix/commit/54aa685f84abc03f13b8027b20aa0c9a17607557

Thank you @JeffreyWay !

[agm1984]

I just got mine working with SASS and PostCSS. I figured I should probably show my solution because this is like the 3rd or 4th time I've struggled to get Tailwind working with SASS after I was already using PostCss with a plain CSS file (main.css).

webpack.mix.js

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

Note for Sass users: Due to an unresolved issue with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable processCssUrls:
Source: https://tailwindcss.com/docs/installation/#3-use-tailwind-in-your-css

app.scss

@tailwind base;

@import 'some/styles1';
@import 'some/styles2';
@import 'some/styles3';

@tailwind utilities;

some/styles1.scss

yolo {
  width: 0;
  max-width: 100%;
  flex-grow: 1;
  @apply .bg-grey-1000;
}

Basically my webpack config before was like this:

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .postCss('resources/assets/css/main.css', 'public/css', [
        tailwindcss('./tailwind.config.js'),
    ]);

so I added this:

    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })

Then the @tailwind directives started working in my app.scss file.

The only issue is that both outputs are 70kb each, but at this stage of my project, this is ok. I will leave it up to the reader to figure out how to optimize their stuff.

I'm using Laravel Mix v3 with Tailwind v1.0 (not using Mix v4 because we are using bundle splitting and Mix poo'd the bed on @import syntax for dynamic imports).