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.

There is maybe some `z-index` expand missing? How do you have your layers one on top of the other? — kissu, May 21 '21 at 14:14
Try inspecting the DOM with your devtools and look for the missing classes between production and dev. — kissu, May 21 '21 at 14:28
sometimes purgecss deletes classes which are not explicitly mentioned, and also if you've css through attributes and pseudo css like ::before, ::after. — Min Somai, May 25 '21 at 11:45
Can you also share the contents of `resources/js/views/Dashboard.vue`? or at least just the relevant HTML/Tailwind classes. — person_v1.32, May 25 '21 at 17:29

score 0 · Answer 1 · answered May 28 '21 at 13:11

0

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.

answered May 28 '21 at 13:11

thelovekesh

1,364
1
8
22

Long shot on this one, without even seeing his `package.json`. It may be the purging that is not working properly here. But OP is not giving any response so yeah, there is that. – kissu May 28 '21 at 13:12
Things are in development working absolutely right. If there would be some error in `purge` then it should be an error too in the development stage. That's why I take this shot! – thelovekesh May 28 '21 at 13:16
Tailwind's purge is used on production env only. – kissu May 28 '21 at 13:17
wasn't aware of that. – thelovekesh May 28 '21 at 13:39
That's why I'm saying this. ^^ – kissu May 28 '21 at 13:40

score 0 · Accepted Answer · answered Mar 28 '22 at 21:10

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

TailwindUI difference in npm run prod & dev

2 Answers2