Question

我正在使用带有 TailwindCSS 的 Laravel Jetstream。我已经根据我对项目的一些要求修改了一些 config.js 文件（webpack、tailwind 等）。出于某种原因，当我编译运行 npm run dev 时，它将配置所有颜色（例如，bg-red-100、bg-red-200、bg-red-300...），但是当我在生产中编译 (npm run production)，它缺少一些 (bg-red-100, bg-red-400, bg-red-500...).

webpack.mix.js：

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

webpack.config.js：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

tailwind.config.js：

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'fhosting-blue': {
                    50: '#98e2f3',
                    100: '#83dcf1',
                    200: '#6ed7ee',
                    300: '#5ad1ec',
                    400: '#45cbea',
                    500: '#31c6e8',
                    600: '#2cb2d0',
                    700: '#279eb9',
                    800: '#228aa2',
                    900: '#1d768b',
                    DEFAULT: '#31c6e8'
                },
                'fhosting-green': {
                    50: '#98f3cf',
                    100: '#83f1c5',
                    200: '#6eeebb',
                    300: '#5aecb2',
                    400: '#45eaa8',
                    500: '#31e89f',
                    600: '#2cd08f',
                    700: '#27b97f',
                    800: '#22a26f',
                    900: '#1d8b5f',
                    DEFAULT: '#31e89f'
                },
            },
            borderColor: {
                'fhosting-blue': '#31c6e8',
                'fhosting-green': '#31e89f'
            }
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            amber: colors.amber,
            black: '#000',
            blue: colors.blue,
            blueGray: colors.blueGray,
            coolGray: colors.coolGray,
            cyan: colors.cyan,
            emerald: colors.emerald,
            fuchsia: colors.fuchsia,
            gray: colors.gray,
            green: colors.green,
            indigo: colors.indigo,
            lightBlue: colors.lightBlue,
            lime: colors.lime,
            orange: colors.orange,
            pink: colors.pink,
            purple: colors.purple,
            red: colors.red,
            rose: colors.rose,
            teal: colors.teal,
            trueGray: colors.trueGray,
            violet: colors.violet,
            warmGray: colors.warmGray,
            white: '#FFF',
            yellow: colors.yellow,
        }
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
        backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

当我运行 npm run development 时，我得到以下 CSS 颜色（以红色为例）：

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
}

.bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
}

.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

.bg-red-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
}

.bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(127, 29, 29, var(--tw-bg-opacity));
}

当我运行 npm run production 时，我得到以下 CSS 文件（以红色为例）：

.bg-red-100 {
    --tw-bg-opacity:1;background-color: rgba(254,226,226,var(--tw-bg-opacity))
}

.bg-red-400 {
    --tw-bg-opacity:1;background-color: rgba(248,113,113,var(--tw-bg-opacity))
}

.bg-red-500 {
    --tw-bg-opacity:1;background-color: rgba(239,68,68,var(--tw-bg-opacity))
}

.bg-red-600 {
    --tw-bg-opacity:1;background-color: rgba(220,38,38,var(--tw-bg-opacity))
}

.bg-red-700 {
    --tw-bg-opacity:1;background-color: rgba(185,28,28,var(--tw-bg-opacity))
}

是什么导致了这个问题？我需要配置颜色，因为我使用它们供客户自定义界面。

Answer 1

您是否有任何机会插入您的顺风类名称的一部分？例如：

const colorType = "red-50";

className={`bg-${colorType}`}

如果是，它们将从生成的样式表中排除。您可以通过在变量中包含整个类名值并对其进行插值来避免这种情况。

const colorType="bg-red-50"

className={`${colorType}`}

Answer 2

您正在使用顺风配置中的清除。如果环境设置为生产，tailwindcss 默认清除 css 文件。

可在 Tailwind 网站 https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

上查看有关清除的详细信息

您可以使用 enabled 属性并将其设置为 false 或使用 env 变量，如下所示：

  purge: {
    enabled: process.env.PURGE_CSS === 'production' ? true : false,
    content: [ './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',],
  },

Answer 3

我遇到了同样的问题，但我发现您不应该使用以下代码：

className={`bg-${primary}`}

相反，您必须使用 className={primary}

其中主要被宣布为：bg-colorname

欲了解更多详情，请阅读Optimizing tailwind for Production

Answer 4

我在 Rails 中也遇到了同样的问题。你可以使用这样的代码

<块引用>

(className={bg-${primary}})

只需确保将所有这些类添加到安全列表中，以便将它们排除在清除之外。

来源：https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes

TailwindCSS 在生产与开发中缺少颜色 - Laravel Jetstream

4 个答案: