title: `@apply` cannot be used with `` because `.` either cannot be found... Tailwind
body: <p>I am using tailwind with laravel mix and postcss.  I get the error:</p>
  
  <p><code>@apply</code> cannot be used with <code>.text-grey-default</code> because <code>.text-grey-default</code> either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that <code>.text-grey-default</code> exists, make sure that any <code>@import</code> statements are being properly processed <em>before</em> Tailwind CSS sees your CSS, as <code>@apply</code> can only be used for classes in the same CSS tree.</p>
  
  <p>I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.</p>
  
  <p><strong>app.scss</strong></p>
  
  <pre><code>@import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "variables";
  @import url("https://fonts.googleapis.com/css?family=Nunito");
  @import "@fortawesome/fontawesome-free/css/all.min.css";
  
  body {
      @apply text-grey-default;
  }
  </code></pre>
  
  <p><strong>webpack.mix.js</strong></p>
  
  <pre><code>let mix = require("laravel-mix");
  let tailwindcss = require("tailwindcss");
  let atImport = require('postcss-import');
  
  mix.js("resources/js/app.js", "public/js")
      .sass("resources/sass/app.scss", "public/css")
      .options({
          processCssUrls: false,
          postCss: [
              atImport(),
              tailwindcss("./tailwind.config.js"),
          ]
      })
      .version();
  </code></pre>
  
  <p><strong>tailwind.config.js</strong></p>
  
  <pre><code>let colors = {
      "grey-default": "#636b6f",
  
  };
  
  module.exports = {
      colors: colors,
      textColors: colors,  
      options: {
          prefix: "",
          important: false,
          separator: ":"
      }
  };
  </code></pre>