Webpack Encore + tailwind : @apply cannot be used with .bg-blue because .bg-blue either cannot be found

[leo91000]

I have a problem with tailwind and I can't use apply directive despite having @import statements placed before any of @apply directive.

Can anyone understand where my configuration is wrong, I have searched for few hours and I can't find anything.

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                     15:32:55

 error  in ./assets/css/app.scss

SyntaxError

(6:2) `@apply` cannot be used with `.bg-blue` because `.bg-blue` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-blue` 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.

  4 | 
  5 | .text-input {
> 6 |   @apply bg-blue text-white font-bold py-2 px-4 rounded-full;
    |  ^
  7 |   &:hover {
  8 |     @apply bg-blue-dark;


 @ ./assets/js/index.js 3:0-25

webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/index.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableSassLoader()
    .enableVueLoader()
    .enablePostCssLoader((options) => {
        options.config = {
            path: "assets/config/postcss.config.js"
        }
    })
;

module.exports = Encore.getWebpackConfig();

assets/config/postcss.config.js

const IN_PRODUCTION = process.env.APP_ENV === 'prod';

module.exports = {
    parser: require('postcss-scss'),
    plugins: [
        require('postcss-import')(),
        require('tailwindcss')('./assets/config/tailwind.config.js'),
        IN_PRODUCTION && require('cssnano')({
            preset: 'default'
        }),
        IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({
            content: ['../js/**/*.vue', '../**/*.html'],
            defaultExtractor (content) {
                const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
                return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
            },
            whitelist: [],
            whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
        }),
        require('autoprefixer')
    ]
};

assets/config/tailwind.config.js

module.exports = {
    theme: {
        white: '#FFFFFF',
        blue: '#007ace',
    },
    variants: {},
    plugins: [],
};

assets/js/index.js

import Vue from 'vue';

import getRouter from './router/router'
import '../css/app.scss';
import App from "./App";
import loadGlobalComponents from "./config/global-components";
import loadFontawesome from "./config/fontawesome";

loadFontawesome();
loadGlobalComponents();

new Vue({
    components: {App},
    template: "<App/>",
    el: "#app",
    router: getRouter(),
});

assets/css/app.scss

@import "./imports/tailwind";

@import "components/form/inputs";

assets/css/imports/tailwind.scss

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

assets/css/components/form/inputs.scss

.text-input {
  @apply bg-blue text-white font-bold py-2 px-4 rounded-full;
  &:hover {
    @apply bg-blue-dark;
  }
}

[nckrtl]

You're missing a colors block in your tailwind.config.js, therefor it can't find the colors that you specified. In the example below you extend the default color set.

Try this:

module.exports = {
  theme: {
     extend: {
       colors: {
         white: '#FFFFFF',
         blue: '#007ace',
       },
     },
   },
   variants: {},
   plugins: [],
  }
}