title: Tailwind css purge removes all dark classes
body: <p>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.</p>
  <p>Does anyone have the same problem? I found an issue about this on tailwind's git as well: <a href="https://github.com/tailwindlabs/tailwindcss/discussions/2793" rel="nofollow noreferrer">https://github.com/tailwindlabs/tailwindcss/discussions/2793</a></p>
  <p>My resources are located in</p>
  <pre><code>[PROJECT FOLDER]
  -resources
    -js
      -components
        Login.Vue
  </code></pre>
  <p>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.</p>
  <p>tailwind.config.js</p>
  <pre><code>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: [],
  }
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;scripts&quot;: {
      &quot;watch&quot;: &quot;npm run dev -- --watch&quot;,
      &quot;dev&quot;: &quot;webpack --mode development --progress&quot;,
      &quot;build&quot;: &quot;webpack --mode production --progress&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/core&quot;: &quot;^7.12.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.1&quot;,
      &quot;@vue/cli&quot;: &quot;^4.5.8&quot;,
      &quot;autoprefixer&quot;: &quot;^9.0.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;eslint&quot;: &quot;^7.13.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.1.0&quot;,
      &quot;extract-loader&quot;: &quot;^5.1.0&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.0&quot;,
      &quot;node-sass&quot;: &quot;^5.0.0&quot;,
      &quot;postcss-loader&quot;: &quot;^4.0.4&quot;,
      &quot;sass-loader&quot;: &quot;^10.0.5&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;tailwindcss&quot;: &quot;^2.0.1&quot;,
      &quot;uglify-js&quot;: &quot;^3.11.5&quot;,
      &quot;vue&quot;: &quot;^2.6.12&quot;,
      &quot;vue-loader&quot;: &quot;^15.9.5&quot;,
      &quot;vue-style-loader&quot;: &quot;^4.1.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;,
      &quot;webpack&quot;: &quot;^4.32.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.2&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.5.1&quot;
    },
    &quot;dependencies&quot;: {
      &quot;vue-router&quot;: &quot;^3.4.9&quot;,
      &quot;vuex&quot;: &quot;^3.5.1&quot;
    }
  }
  </code></pre>
  <p>Login.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;flex flex-col pt-8 dark:bg-dark-background&quot;&gt;
      &lt;div class=&quot;flex flex-col bg-backgroundDark py-8 px-2 items-center dark:bg-dark-background-light&quot;&gt;
        &lt;h2 class=&quot;flex w-max font-raleway text-2xl font-extrabold dark:text-dark-text-primary&quot;&gt;You're currently Logged Out&lt;/h2&gt;
        &lt;p class=&quot;flex mt-3 text-lg font-light text-center dark:text-dark-text-primary&quot;&gt;The page you are trying to access is available for registered customers only. Please login to proceed.&lt;/p&gt;
        &lt;button id=&quot;loginButton&quot; class=&quot;mt-5 bg-primary rounded ring-primary&quot; type=&quot;button&quot;&gt;Login&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          loading: false,
        }
      },
      methods: {
  
      }
    }
  &lt;/script&gt;
  </code></pre>