@apply can not be used (with postcss-import and webpack)

[regnerisch]

I have this error:

    ERROR in ./assets/main/components/components-critical.css (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib!./assets/main/components/components-critical.css)
    Module build failed: Syntax Error 
    
    (2:5) `@apply` cannot be used with `.w-full` because `.w-full` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.w-full` 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.
    
      1 | .nav {
    > 2 |     @apply .w-full;
        |     ^
      3 | }
      4 | 

And I do not know where this problem occures

My webpack.config:

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function (env, argv) {
  return {
    entry: {
      'main-base': [
        './assets/main/base/index.css',
      ],
      'main-components-critical': [
        './assets/main/components/index-critical.js',
      ],
      'main-components': [
        './assets/main/components/index.js',
      ],
      'react': [
        './assets/main/components/react.js',
      ],
      'main-utilities': [
        './assets/main/utilities/index.css',
      ],
    },
    output: {
      path: path.resolve(__dirname, 'web/public/assets'),
      filename: '[name].[hash].js',
      chunkFilename: '[name].[hash].js'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: argv['mode'] === 'production'
              }
            },
            'postcss-loader'
          ]
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    plugins: [
      new ManifestPlugin(),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].[hash].css',
        chunkFilename: '[name].[hash].css'
      })
    ]
  }
};

Tailwind preflight is in assets/main/base/index.css (@import 'tailwindcss/preflight';) Tailwind utilities is in assets/main/utilities/index.css (@import 'tailwindcss/utilities';)

And in assets/main/components/navigation/style-critical.css I have the @apply this stylesheet is imported in assets/main/components/components-critical.css (@import './navigation/style-critical.css';)

I think everything is configured as expected from tailwind postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.js'),
    require('postcss-cssnext'),
    require('postcss-flexbugs-fixes')
  ]
};

and package.json

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "install": "^0.10.4",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-flexbugs-fixes": "^3.3.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.3",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-router-dom": "^4.2.2",
    "rimraf": "^2.6.2",
    "style-loader": "^0.20.3",
    "tailwindcss": "^0.5.2",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-manifest-plugin": "^2.0.0-rc.2"
  },

If you need more information let me know. I do not know what I am doing wrong :(

[mran3]

I also was not able to make @apply work with webpack and post-css. Tailwind runs (I know it because it inserts the @tailwind directives in the styles), but the applys just don't work, I ended up running tailwind with an npm script, but it's kind of a loose wheel from my webpack configuration.