Issue in combination with Tailwind @apply

[DirkWolthuis]

Hi, using latest version I get the following error:

 postcss: src/components/nes-grid/nes-grid.css, line: 470: src/components/nes-grid/nes-grid.css
           The `$(icon):nes-gap-2` class does not exist. If you're sure that `$(icon):nes-gap-2` 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.

With this code:

@each $icon in sm, md {
  .icon-$(icon) {
    @apply $(icon):nes-gap-2;
  }
}

With this config:

 postcss({
      plugins: [
        postcssFor(),
        postcssConditionals(),
        require("postcss-each-variables"),
        require("postcss-each"),
        tailwindcss(),
        autoprefixer(),
        postcssNesting(),
        postcssHexRgba(),
      ],
    }),
    inlineSvg(),

Using variables for the postcss-for packages does work without problem. EG: @apply sm:nes-gap-$(gap);

Any thoughts? Really want to use this package in combination with Tailwind.

[adamwathan]

This should help:

tailwindlabs/tailwindcss#7362 (comment)