11 months ago

Multiple Tailwind Configs for Theming

Posted 11 months ago by ncamm

I'm researching a project that will need to support brand color schemes and lately I've been using Tailwind along with SASS. My first thought was multiple configs that use different hex values for primary, secondary, tertiary, info, success, error, ect, etc, and while I did get to compile using Mix, the second mix.sass statement for brand-b is still using the tailwind.js file for brand-a. Any ideas on why? Is this a limitation of Mix?

Here is what my webpack.mix.js file looks like:

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

mix.sass('resources/themes/brand-a/sass/styles.scss', 'public/assets/themes/brand-a/css/styles.css')
        processCssUrls: false,
        postCss: [tailwindcss('resources/themes/brand-a/tailwind.js')],

mix.sass('resources/themes/brand-b/sass/styles.scss', 'public/assets/themes/brand-b/css/styles.css')
        processCssUrls: false,
        postCss: [tailwindcss('resources/themes/brand-b/tailwind.js')],

Please sign in or create an account to participate in this conversation.