title: After webpack(Nextjs 10 project) changes tailwind errors
body: <p>Before the changes, everything was going to build and everything worked.</p>
  <p>my next.config.js //</p>
  <pre><code>// const withCss = require('@zeit/next-css');
  // const withSass = require('@zeit/next-sass');
  
  class TailwindExtractor {
    static extract(content) {
      return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
    }
  }
  const nextConfig = {
     ...
  };
  
  module.exports = withPlugins([
     // [ withSass, {} ],
     // [ withCss, {} ],
     [ withPurgeCss, {
        ...
     }
  ], nextConfig);
  </code></pre>
  <p>Further, as recommended, I decided to abandon the use of the deprecated @ zeit / next-css and @ zeit / next-sass</p>
  <p>I added the tailwind.config.js file as written on their website:</p>
  <pre><code>module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
      extend: {},
  },
  variants: {
      extend: {},
  },
  plugins: [],
  };
  </code></pre>
  <p>And made changes to post.config.js and also installed the missing packages:</p>
  <pre><code>module.exports = {
  plugins: {
      'postcss-import': {},
      tailwindcss: {},
      autoprefixer: {},
      'postcss-preset-env': { stage: 2 },
  },
  };
  </code></pre>
  <p>In _app.js, I include the main.scss file:</p>
  <pre><code>@import &quot;tailwindcss/preflight&quot;;
  @import &quot;tailwindcss/components&quot;;
  @import &quot;tailwindcss/utilities&quot;;
  
  .self-class {
      @apply .bg-olive .shadow-olive .text-base .text-white .font-bold;
  }
  </code></pre>
  <p><strong>I get an error:</strong> <code>Error: Syntax error: /home/roma/project/main.scss </code>@apply<code>cannot be used with</code>.bg-olive<code>because</code>.bg-olive<code>either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that</code>.bg-olive<code>exists, make sure that any</code>@import<code>statements are being properly processed *before* Tailwind CSS sees your CSS, as</code>@apply<code> can only be used for classes in the same CSS tree.</code></p>
  <p>Do I have my tailwind.config.js file configured incorrectly or is the file built incorrectly in general? So where I am trying to refer to tailwind styles is not known about them yet?</p>
  <p>Thanks for any help!</p>