Tailwindcss: Issues when using two different config files

[slashequip]

Hey,

I'm using Laravel Mix to compile SASS with Tailwind. I have two different areas of the site (website and admin area) and I want to have to different style sheets for each area. During compilation I get @apply errors due to colors not being found. It appears that Tailwind only uses the first configuration file passed to it:

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

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

In this case this admin.scss produces an error '@apply' cannot be used with '.bg-white' because '.bg-white' either cannot be found... as the site config does not contain white in the colors object, even though the admin config does.

I'd like to use two config files in this case to keep my CSS small for the user facing site but I'm less concerned about file size for the admin area.

Note; flipping the build order of these gets rid of the issue. I have also tried requiring Tailwind into two different constants but it did not make a difference.

[nivv]

I had the same problem. Solved it by using two webpack-config files. Can post my setup if that’s interesting?

[slashequip]

@nivv sounds like a decent work around, would be good to see how you've done it, are you using Mix or standalone?

[adamwathan]

See previous discussion here: https://github.com/tailwindcss/tailwindcss/issues/261

Currently it's a limitation of Mix and nothing we can do in Tailwind. You could do it with a custom Webpack setup for sure, but I haven't personally had a chance to put together an example.

Closing as not a Tailwind issue but feel free to continue the conversation.

[dolbex]

Adam,

Any chance you could give me some direction on how you might pull this off with two configurations in webpack? I have two VueJS apps that need to lean on two different configs and would like to get them in the same build chain.... killing myself with webpack here.