How to use two different tailwind config on laravel project

Question

I am using a admin template on one of my laravel project and here are the files:

tailwind.config.js

const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

module.exports = {
    mode: "jit",
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.jsx",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {
            colors: {
                rgb: toRGB(colors),
                primary: withOpacityValue("--color-primary"),
                secondary: withOpacityValue("--color-secondary"),
                success: withOpacityValue("--color-success"),
                info: withOpacityValue("--color-info"),
                warning: withOpacityValue("--color-warning"),
                pending: withOpacityValue("--color-pending"),
                danger: withOpacityValue("--color-danger"),
                light: withOpacityValue("--color-light"),
                dark: withOpacityValue("--color-dark"),
                slate: {
                    50: withOpacityValue("--color-slate-50"),
                    100: withOpacityValue("--color-slate-100"),
                    200: withOpacityValue("--color-slate-200"),
                    300: withOpacityValue("--color-slate-300"),
                    400: withOpacityValue("--color-slate-400"),
                    500: withOpacityValue("--color-slate-500"),
                    600: withOpacityValue("--color-slate-600"),
                    700: withOpacityValue("--color-slate-700"),
                    800: withOpacityValue("--color-slate-800"),
                    900: withOpacityValue("--color-slate-900"),
                },
                darkmode: {
                    50: withOpacityValue("--color-darkmode-50"),
                    100: withOpacityValue("--color-darkmode-100"),
                    200: withOpacityValue("--color-darkmode-200"),
                    300: withOpacityValue("--color-darkmode-300"),
                    400: withOpacityValue("--color-darkmode-400"),
                    500: withOpacityValue("--color-darkmode-500"),
                    600: withOpacityValue("--color-darkmode-600"),
                    700: withOpacityValue("--color-darkmode-700"),
                    800: withOpacityValue("--color-darkmode-800"),
                    900: withOpacityValue("--color-darkmode-900"),
                },
            },
            fontFamily: {
                roboto: ["Roboto"],
            },
            container: {
                center: true,
            },
            maxWidth: {
                "1/4": "25%",
                "1/2": "50%",
                "3/4": "75%",
            },
            strokeWidth: {
                0.5: 0.5,
                1.5: 1.5,
                2.5: 2.5,
            },
        },
    },
    plugins: [require("@tailwindcss/forms")],
    variants: {
        extend: {
            boxShadow: ["dark"],
        },
    },
}

and this, is my current webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/admin-template/js/app.js', 'public/assets/js/admin-template.js')
    .js('resources/js/app.js', 'public/assets/js')
    .react()
    .sass('resources/sass/app.scss', 'public/assets/css')
    .postCss("resources/admin-template/css/app.css", "public/assets/css/admin-template.css");

and here is my current postcss.config.js

module.exports = {
    plugins: [
        require("postcss-import"),
        require("postcss-advanced-variables"),
        require("tailwindcss/nesting"),
        require("tailwindcss")("./tailwind.config.js"),
        require("autoprefixer"),
    ],
};

Now, I had separately created frontend design, and it has this tailwind.config.js

module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {
      colors: {
        'primary': '#1A1C29',
        'primary-light': '#2A2D3E',
        'theme-blue': '#2563eb',
        'theme-green':  '#06D594',
        'light-gray': '#999ba6',
        'yellow': '#FFFF00',
        'gold': '#facc15',
        'red':  '#FF0000'
      },
      fontFamily:{
        'poppins': ['Poppins', 'sans-serif'],
        'roboto' : ['Roboto', 'sans-serif']
      },
      fontSize:{
        'xxs': '.63rem',
      },
      screens:{
        'sm': '575px',
      },
    },
  },
}

Now, I have this css on resources/css/front.css, now how could I compile on this laravel project by using this second tailwind config value for front .css only.

I have tried this by adding this line on webpack. But, its not compiling correctly, its using different colors combination.

.postCss("resources/css/front.css", "public/assets/css/front.css");

What would be the best and safest to handle this scenario with single tailwind.config.js

Answer 1

If merging both tailwind.config.js files is not an option, calling mix.postCss twice is one way to do it.

The postCss method accepts an array of PostCSS plugins. This allows you to pass tailwindcss with a different configuration file.

webpack.mix.js

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

mix.postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss')('tailwind.config.js')
]);

mix.postCss('resources/css/front.css', 'public/css', [
    require('tailwindcss)('tailwind-front.config.js')
]);

In that case I'd suggest removing the postcss.config.js file from your project and providing the array of plugins manually for each calls to postCss.

webpack.mix.js

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

mix.postCss('resources/css/app.css', 'public/css', [
    require("postcss-import"),
    require("postcss-advanced-variables"),
    require("tailwindcss/nesting"),
    require('tailwindcss')('tailwind.config.js'),
    require("autoprefixer"),
]);

mix.postCss('resources/css/front.css', 'public/css', [
    require("postcss-import"),
    require("postcss-advanced-variables"),
    require("tailwindcss/nesting"),
    require('tailwindcss')('tailwind-front.config.js'),
    require("autoprefixer"),
]);