TailwindCSS Missing Colors in Production vs Development - Laravel Jetstream

Question

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.

Junior

Answer 1

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}`}

Alack

Thanks for the answer, i'd suggest explaining it a bit further in regards to the use or Purge within Tailwind and how to write code with this in mind (tailwindcss.com/docs/…) – Embark

Why would you need interpolation in your case even when you can just hardcode the "bg-red-50" in className ? We need dynamic generation of classes based on interpolated values. – Centner

Answer 2

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

Granddaddy

Answer 3

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

Vert

Answer 4

I was also facing the same issue in Rails. you can use code like this

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

Just make sure you add all those classes to safelist so that they will be excluded from purging.

source: https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes

Ramirez