logo标签列表

TailwindCSS在生产环境和开发环境中缺失颜色 - Laravel Jetstream

csslaravelwebpacktailwind-csstailwind-in-js
16
我正在使用Laravel Jetstream和TailwindCSS。我已经修改了一些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))
}

可能是什么原因导致了这个问题？我需要进行颜色配置，因为我要让客户自定义他们的界面。

4个回答
36

你是否有在插值你的Tailwind类名的一部分呢？例如：

const colorType = "red-50";

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

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

如果你是这样做的话，它们会被生成的样式表所排除。你可以通过在变量中包含完整的类名值，并对其进行插值来避免这种情况，即：

const colorType="bg-red-50"

className={`${colorType}`}
谢谢你的回答，我建议在使用Tailwind时进一步解释如何使用或清除无用CSS，并如何编写考虑到这一点的代码（https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html）。 - Dean Whitehouse
1
即使您可以在className中硬编码“bg-red-50”，为什么在您的情况下仍需要插值？我们需要根据插值生成动态类。 - trainoasis
5
您正在使用 Tailwind 配置中的清除功能。如果环境设置为生产环境，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',],
  },
3
我曾经遇到过同样的问题，但我发现不应该使用以下代码：
className={`bg-${primary}`}

而不是使用class={primary}

其中primary的声明方式如下：bg-colorname

更多细节请阅读优化tailwind以用于生产环境

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接