Tailwind css purge removes all dark classes

Question

I have a pretty simple project which uses a couple of colours extended to the theme. When I enable purging in my tailwind.config.js file, everything is purged as they should, but all of my dark classes get purged too.

Does anyone have the same problem? I found an issue about this on tailwind's git as well: https://github.com/tailwindlabs/tailwindcss/discussions/2793

My resources are located in

[PROJECT FOLDER]
-resources
  -js
    -components
      Login.Vue

I don't know if it's worth mentioning, but I made a culon scss file for tailwind which imports its base, components and utilites and added it as an entry in my webpack.config.js for faster webpack compiling.

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './resources/js/components/**/*.vue',
      './resources/js/**/*.vue',
      './index.php'
    ],
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'raleway': ['Raleway', 'Arial', 'sans-serif']
      },
      colors: {
        'primary': '#ffc531',
        'primaryDark': '#ca9100',
        'backgroundDark': '#f2f2f2',
        'dark-text-primary': '#d2d2d2',
        'dark-background': '#292929',
        'dark-background-light': '#3e3d3d'
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "scripts": {
    "watch": "npm run dev -- --watch",
    "dev": "webpack --mode development --progress",
    "build": "webpack --mode production --progress"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/cli": "^4.5.8",
    "autoprefixer": "^9.0.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.13.0",
    "eslint-plugin-vue": "^7.1.0",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.0.1",
    "uglify-js": "^3.11.5",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1"
  },
  "dependencies": {
    "vue-router": "^3.4.9",
    "vuex": "^3.5.1"
  }
}

Login.vue

<template>
  <div class="flex flex-col pt-8 dark:bg-dark-background">
    <div class="flex flex-col bg-backgroundDark py-8 px-2 items-center dark:bg-dark-background-light">
      <h2 class="flex w-max font-raleway text-2xl font-extrabold dark:text-dark-text-primary">You're currently Logged Out</h2>
      <p class="flex mt-3 text-lg font-light text-center dark:text-dark-text-primary">The page you are trying to access is available for registered customers only. Please login to proceed.</p>
      <button id="loginButton" class="mt-5 bg-primary rounded ring-primary" type="button">Login</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
      }
    },
    methods: {

    }
  }
</script>

Answer 1

The problem was that I had to set NODE_ENV=production variable in my package.json npm scripts.

"scripts": {
    ...
    "build": "NODE_ENV=production webpack --mode=production --progress"
},

Answer 2

Add this to your webpack.config.js to whitelist your dark-mode class

purgeCSS: {
    whitelist: [
      'dark-mode', //dark mode custom class name
    ],
  },

Answer 3

I fixed this by adding this to tailwind.config.js:

    options: {
      safelist: ['dark'],
    },

So now it looks like:

module.exports = {
  purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
    options: {
      safelist: ['dark'],
    },
  },
  darkMode: 'class',
  // ...
}

There's a bit more detail about it in https://github.com/tailwindlabs/tailwindcss/discussions/2793