space and divide utilities not working with @apply

[dmarkow]

On 1.3.4, when trying to use something like space-x-1 with @apply I get the following error:

@tailwind base;
@tailwind components;
@tailwind utilities;

.form-inline {
  @apply flex space-x-1 items-center;
}

@apply cannot be used with .space-x-1 because.space-x-1 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .space-x-1 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.

https://codesandbox.io/s/priceless-euclid-2iqpt

The dist/utilities.css file contains the space/divide classes, so I'm not sure why @apply isn't picking them up. I'm wondering if it's because the space/divide classes themselves don't have any css, as they're only used as parent selectors?

.space-x-1 > :not(template) ~ :not(template) {
  --space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-x-reverse)))
}

[janslu]

1.3.5 didn't fix this for me.

[adamwathan]

This is just a limitation of how apply is currently implemented, it only works on rules with a single class and no descendants, pseudo-classes, etc.

We're hoping to make apply more sophisticated eventually but the ideas we have for pulling it off successfully will involve a small breaking change, so will likely be a while.

For now this is just expected behavior/by design, so I would recommend just writing the CSS manually if you want to reuse these rules in another class.

[adamwathan]

Example for reference (you don't need the funky calc/space-x-reverse stuff for your component probably so I've reduced it down to a simple ml-4):

.form-inline {
  @apply flex space-x-1 items-center;
}
.form-inline > :not(template) + :not(template) {
  @apply ml-4;
}

[janslu]

Thanks for clarification. This is such a useful thing :-) But for now I'll keep using x + x like a caveman.

[darrylhein]

Should this be documented somewhere? The only way we figured this out was by finding this issue...after 15 minutes of trying and 15 minutes of searching. Would it be possible to detect @apply with the applicable classes? The error message just indicates that it's missing. I can try to help, but not sure what the desire or best method would be.