webpacktailwind-csscss-purge

TailwindUI difference in npm run prod & dev

When I run npm run dev it shows the correct output of my TailwindUI component: enter image description here

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

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.

Solution

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