`@apply` cannot be used with `` because `.` either cannot be found... Tailwind

Question

I am using tailwind with laravel mix and postcss. I get the error:

@apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

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.

app.scss

@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;
}

webpack.mix.js

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();

tailwind.config.js

let colors = {
    "grey-default": "#636b6f",

};

module.exports = {
    colors: colors,
    textColors: colors,  
    options: {
        prefix: "",
        important: false,
        separator: ":"
    }
};

Answer 1

I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.