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

Question

我在我的一个 laravel 项目中使用管理模板，文件如下：

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"],
        },
    },
}

这是我目前的 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");

这是我当前的 postcss.config.js

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

现在，我已经单独创建了前端设计，它有这个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',
      },
    },
  },
}

现在，我在resources/css/front.css 上有这个 css，现在我如何才能通过仅使用前面 .css 的第二个顺风配置值来编译这个 laravel 项目。

我已经通过在 webpack 上添加这一行来尝试这个。但是，它没有正确编译，它使用了不同的颜色组合。

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

使用单个 tailwind.config.js 处理这种情况最好和最安全的方法是什么

Answer 1

如果不能合并两个 tailwind.config.js 文件，则调用 mix.postCss 两次是一种方法。

postCss 方法accepts an array of PostCSS plugins。这允许您使用不同的配置文件传递tailwindcss。

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')
]);

在这种情况下，我建议从您的项目中删除 postcss.config.js 文件，并为每次调用 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"),
]);

Answer 2

我不建议使用两个顺风配置，因为它会在不久的将来为您带来更多开销，一个示例是如果您决定升级到顺风 v3

一般的经验法则是始终为您的案例样式中需要它的任何内容保留一个配置文件（有 c 的边缘案例，但您不是这种情况）

在您的情况下，我只需在前面的颜色前添加一个前缀，例如：frontPrimary frontSecondary