Tailwindcss: Multiple tailwind configurations

[Pab89]

Hey there

First of all thanks for a awesome css framework. Now my question is it possible to have two configurations(tailwind.css). Basically i want a frontend-tailwind.js and a backend-tailwind.js. So i that i can have two styles sheets backend.scss and frontend.scss wich each uses their own configuration file and have their own classes. So that i dont need to load more css then needed.

[adamwathan]

What build system are you using? The instructions will be different whether you are using Webpack, Gulp, Laravel Mix, etc.

[Pab89]

Thanks for the quick reply i am using Laravel Mix. :)

[adamwathan]

So here's as close as I've gotten with Mix:

mix.sass('./resources/assets/sass/front.scss', './public/css/sass-front.css')
    .sass('./resources/assets/sass/back.scss', './public/css/sass-back.css')
    .options({
        processCssUrls: false,
    })

Config.preprocessors.sass[0].postCssPlugins = [tailwindcss('./tailwind-front.js')];
Config.preprocessors.sass[1].postCssPlugins = [tailwindcss('./tailwind-back.js')];

It's not quite working though, seems to be using the same config for both and I haven't quite figured out if that's a Tailwind problem or a Mix problem. Don't have a ton of time to explore it further right now but feel free to try and troubleshoot that deeper 👍

[Pab89]

Thanks, ill try to look into that

[diemah77]

What you can do is creating two different Laravel Mix webpack config files like so:

https://stackoverflow.com/questions/45046696/laravel-mix-multiple-entry-points-generates-one-manifest-js

Thus you can use different tailwind configurations!

[Pab89]

Thanks ill try that out

[adamwathan]

Going to close this as not an issue with Tailwind, but feel free to open an issue on the Discuss repo if you'd like to continue the conversation.

[rosswilson252]

@adamwathan @Pab89 It might be worth having a look at https://github.com/JeffreyWay/laravel-mix/issues/1688#issuecomment-415008456

[pawelmysior]

Looks like the problem is solved in the newest version of Laravel Mix (4.0.0): https://github.com/JeffreyWay/laravel-mix/issues/1688#issuecomment-445872399

[mattkoch614]

@adamwathan Is this doable relatively easily with just straight up postcss, webpack, and tailwind? I have a similar situation, where I want to use tailwind to style HTML that will eventually be converted into a PDF, which will use different CSS than the main application.

[jakedohm]

@adamwathan since Webpack v4 this doesn't appear to work. It looks like it's not recommended to use extract-text-webpack-plugin for CSS anymore, which is causing some problems. Has anyone solved this recently?

[rosswilson252]

@jakedohm You could do something like:

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

mix
    .sass('resources/sass/app/app.scss', 'public/css/app.css', {
        implementation: require('node-sass')
    }, [
        tailwind(`./resources/sass/app/tailwind.config.js`)
    ])

    .sass('resources/sass/admin/admin.scss', 'public/css/admin.css', {
        implementation: require('node-sass')
    }, [
        tailwind(`./resources/sass/admin/tailwind.config.js`)
    ]);

This way you can specify which tailwind config file you want to use for each sass/scss file.

[heyalbert]

@rosswilson252 This is unfortunately not possible at the moment. I tried and your code example will end up in an infinite loop. As far as I know it is impossible to use two config files with Laravel Mix, when you also want to use SCSS in your project.

Even when you try to build around the issue, tailwind(/*path to config here*/) is only accepting one argument. Or you get to work with https://laravel-mix.com/extensions/postcss-config, but again, you're left alone when you want to use it with SCSS.

[rosswilson252]

@heyalbert I've used the above example in quite a few projects now (sometimes outputting 3 or 4 different sections).

Are you trying to use two different config files for a single output i.e (tailwind1.config.js and tailwind2.config.js) > app.css?