@apply cannot be used with '.'

[p-rez]

Hi i got a project that uses tailwind and when i try to compile the classes using laravel-mix i get the following error:

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

Console error:

scss code:

What i've done is putting everything inline along with @apply like this: (example of previous code) @apply link text-xs font-sans font-semibold uppercase leading-none;

then i try to compile it, and i get the same error on another class or property,

So if go and do the same thing it's gonna show another error from another class or property, like a never ending story of errors, so maybe there's something wrong with the way webpack is mixing those classess

I'm using yarn to download packages and 'yarn hot' to compile the js/scss files on the webpack.

This is my webpack

let mix = require('laravel-mix')

require('laravel-mix-purgecss');
require('laravel-mix-tailwind');
require('laravel-mix-critical');

mix.webpackConfig({
  resolve: {
    extensions: [".json"],
    modules: [
      path.resolve(__dirname, 'node_modules'),
    ]
  }
});

mix
  .setPublicPath('./public')

  // The App Build
  .js('resources/js/app.js', 'public/js')
  .sass('resources/scss/app.scss', 'public/css')
  .minify(['public/css/app.css', 'public/js/app.js'])
  .sourceMaps()
  .webpackConfig({ devtool: "inline-source-map" })
  .browserSync({
    proxy: 'apiabroad.test',
    files: [
      './templates/**/*.twig',
      './public/css/**/*.css',
      './public/js/**/*.js',    ]
  })
  .tailwind()
  .version()
  .purgeCss({
    enabled: true,
    globs: [
      path.join(__dirname, './templates/**/*.twig'),
      path.join(__dirname, './resources/js/**/*.js'),
      path.join(__dirname, './resources/js/**/*.vue'),
      path.join(__dirname, './resources/scss/**/*.scss')
    ],
    whitelistPatterns: [  /^h-/, /^choices/, 
                          /^tns/, /^selectdrop/, /^is/, 
                          /^filter-/, /^inner/, /^\-/, 
                          /^duration/, /^timing/,
                          /^main/, /^show/, /^hide/,
                          /^form/, /^maps/, /^gm-/,
                          /^flag/, /^tag-/],
    extensions: ['html', 'js', 'vue', 'twig']
  });

This is my package.json

{
  "name": "----",
  "version": "1.0.0",
  "description": "----",
  "repository": "----",
  "author": "----",
  "license": "N/A",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "stylelint resources/scss/**.scss --fix",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "2.0.1",
    "cross-env": "^5.1",
    "eslint": "^5.12.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-vue": "^5.1.0",
    "html-critical-webpack-plugin": "1.1.0",
    "laravel-mix": "^2.1",
    "laravel-mix-purgecss": "^2.2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.12",
    "purgecss-webpack-plugin": "^1.1.0",
    "tailwindcss": "^0.7.2",
    "vue": "^2.5.22"
  },
  "dependencies": {
    "add": "^2.0.6",
    "algoliasearch": "^3.32.0",
    "choices.js": "^4.1.3",
    "countup.js": "^1.9.3",
    "hamburgers": "^0.9.3",
    "in-view": "^0.6.1",
    "laravel-mix-critical": "^0.1.1",
    "laravel-mix-tailwind": "^0.1.0",
    "lodash.flatten": "^4.4.0",
    "lodash.forown": "^4.4.0",
    "lodash.get": "^4.4.2",
    "lodash.isarray": "^4.0.0",
    "lodash.kebabcase": "^4.1.1",
    "lodash.meanby": "^4.10.0",
    "lodash.sortby": "^4.7.0",
    "lodash.tonumber": "^4.0.3",
    "lodash.xor": "^4.5.0",
    "moment": "^2.22.2",
    "raven-js": "^3.27.0",
    "smoothscroll-polyfill": "^0.4.3",
    "stylelint": "^9.8.0",
    "stylelint-config-standard": "^18.2.0",
    "tiny-slider": "^2.8.8",
    "tippy.js": "^3.3.0",
    "urijs": "^1.19.1",
    "url-search-params": "^1.1.0",
    "vue-countup-v2": "^2.0.0",
    "vue-instantsearch": "^1.7.0",
    "vue-lazyload": "^1.2.6",
    "vue-slider-component": "^2.8.2",
    "vue-sticky": "^3.3.4",
    "vue2-google-maps": "^0.10.5",
    "vuex": "^3.0.1",
    "yarn": "^1.9.4"
  }
}

So if anyone could lend me a hand or point me in the right direction to solve this issue i would gladly buy you a coffee

[willa75]

I'm having a similar issue, did you ever figure out what was wrong with your project?

[p-rez]

@willa75 No, at the end i made a Virtual Machine based on Ubuntu 18.04, installed all the stuff that i needed (Php, Apache, Mysql, Npm, Node, Yarn) and i got it running there.

Some coworkers told me that they had a similar issue on another project and they had to downgrade npm or node version, i'll ask tomorrow which version they used and post it here

[willa75]

@NoFootDancer Thanks that would be greatly appreciated!