TailwindUI difference in npm run prod & dev

Question

When I run npm run dev it shows the correct output of my TailwindUI component:

But when I run npm run prod it doesn't recognize all the colors anymore.

What is wrong?

This is the config of my tailwind.config.js:

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter var", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                "yellow-50": "#FFEDCC",
                "yellow-100": "#FFDEA3",
                "yellow-200": "#FFD07A",
                "yellow-300": "#FFC152",
                "yellow-400": "#FFB329",
                "yellow-500": "#FFA400",
                "yellow-600": "#D48902",
                "yellow-700": "#AA6F03",
                "yellow-800": "#815404",
                "yellow-900": "#583A04"
            },
        },
    },
    purge: [
        "./storage/framework/views/*.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    variants: {
        extend: {
            opacity: ["disabled"],
        },
        backgroundColor: ["responsive", "hover", "group-hover"],
        textColor: ["responsive", "hover", "group-hover"],
    },
    plugins: [
        require("@tailwindcss/forms"),
    ],
};

And the webpack.mix.js:

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


const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
    .vue()
    .sourceMaps()
    .postCss("resources/css/app.css", "public/css", [
        tailwindcss("./tailwind.config.js"),
    ]);

const webpack = require("webpack");

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: true,
        }),
    ],
});

Probably something is going wrong with the PostCSS option, but what? The view is located in resources/js/views/Dashboard.vue.

Answer 1

What I did, was to comment the purge line in the JSON configuration file of tailwind (tailwind.config.js).

module.exports = {
  //purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {
      colors: {
        'water-green': {
          50: '#F0FDFA',
          100: '#CCFBF1',
          200: '#99F6E4',
          300: '#5EEAD4',
          400: '#2DD4BF',
          500: '#37D0B2',
          600: '#0D9488',
          700: '#0F766E',
          800: '#115E59',
          900: '#134E4A',
        },
      },
    },
  },
  plugins: [require('tw-elements/dist/plugin')],
}

Answer 2

If your configuration working fine in the development and not in production it means that you have an error in your package.json file.

You have included any of the files in the devDependencies that's why it's working on the development stage. When you go to the production level it can not identify the packages as they are added in the devDependencies.

So move all your packages that are required in the production from devDependencies to dependencies of the project.