Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TailwindCSS Missing Colors in Production vs Development - Laravel Jetstream

I am using Laravel Jetstream with TailwindCSS. I have modified some of the config.js files (webpack, tailwind, etc.) with some of my requirements for the project. For some reason, when I compile running npm run dev, it will have all the colors configured (for instance, bg-red-100, bg-red-200, bg-red-300...), but when I compile in production (npm run production), it is missing some (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')],
};

When I run npm run development I get the following CSS colors (red as an example):

.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));
}

When I run npm run production I get the following CSS file (red as an example):

.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))
}

What could be causing this issue? I need the colors configured since I am using them for customers to customize their interfaces.

like image 522
Brian Logan Avatar asked Feb 08 '21 05:02

Brian Logan


3 Answers

Are you interpolating a portion of your tailwind class name by any chance? Ex:

const colorType = "red-50";

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

If you are, they'll be excluded from the generated stylesheet. You can avoid this by including the entire class name value in the variable and interpolating it ie.

const colorType="bg-red-50"

className={`${colorType}`}
like image 54
Evan Almeida Avatar answered Dec 08 '22 00:12

Evan Almeida


You are using the purge in tailwind configuration. tailwindcss by default purge the css file, if environment is set to production.

Details on Purge can be seen on the Tailwind website at https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

You can use the enabled property and set it to false or use env variable as shown below:

  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',],
  },
like image 33
Sourabh Avatar answered Dec 08 '22 00:12

Sourabh


i was facing the same issue, but i found that you should not use codes like:

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

instead you must use className={primary}

where primary is decraled like : bg-colorname

for more details read Optimizing tailwind for Production

like image 36
EDMOND G Avatar answered Dec 08 '22 02:12

EDMOND G