如何在 laravel 项目上使用两种不同的顺风配置

Question

. Answers to this question are eligible for a +50 reputation bounty. Aayush Dahal wants to to this question:

Either need to work with two tailwind config, or merge both of these configuration into one, without affecting the outcome drastically.

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"),
]);