В TailwindCSS отсутствуют цвета в производстве и разработке - Laravel Jetstream

Я использую Laravel Jetstream с TailwindCSS. Я изменил некоторые файлы config.js (webpack, попутный ветер и т. Д.) С учетом некоторых моих требований к проекту. По какой-то причине, когда я компилирую npm run dev, в нем будут настроены все цвета (например,, bg-red-200, bg-red-300...), но когда я компилирую в 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 ответа

Вы случайно не вставляете часть имени класса попутного ветра? Бывший:

      const colorType = "red-50";

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

Если да, они будут исключены из созданной таблицы стилей. Вы можете избежать этого, включив в переменную все значение имени класса и интерполировав его, т.е.

      const colorType="bg-red-50"

className={`${colorType}`}
Источник

Вы используете продувку в конфигурации с попутным ветром. tailwindcss по умолчанию очищает файл css, если для среды задано значение production.

Вы можете использовать свойство 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',],
  },
Источник

Я столкнулся с той же проблемой, но обнаружил, что вам не следует использовать такие коды, как:

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

вместо этого вы должны использовать className={primary}

где первичный декратируется как: bg-colorname

для получения дополнительной информации прочтите Оптимизация попутного ветра для производства

Источник

Я также столкнулся с той же проблемой в Rails. вы можете использовать такой код

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

Просто убедитесь, что вы добавили все эти классы в список надежных отправителей, чтобы исключить их из очистки.

источник: https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes

Источник
Другие вопросы по тегам