Explore implementing @apply in terms of postcss-extend-rule

[adamwathan]

If I had known about this plugin when I created Tailwind, we probably wouldn't even have @apply and I would just be telling people to use this instead because it handles all of the annoying crap that @apply doesn't handle yet beautifully, like applying hover:bg-red-500 and stuff.

There are probably some special things we'd need to do to get the shadow lookup stuff working but in general I wonder if I should explore reimplementing apply using this plugin under the hood. Opening this issue so I don't forget :)

[TheDutchCoder]

Would it be possible to make this a priority?

Currently it's pretty much limiting any sort of inheritance in Tailwind and pretty much renders responsive classes unusable :(

// Fine
.input {
  @apply text-red;
}

.btn {
  @apply input;
}

// Already doesn't work :(
.input {
  @apply text-red;
}

@screen sm {
  .input {
    @apply text-blue;
  }
}

.btn {
  @apply input;
}

[camppacifictech]

Hi, on this topic, I just made a postcss plugin to 'preprocess' @apply at-rules so that variants can be used - basically it just expands any variant-prefixed classes in @apply rules to an @apply rule of the unprefixed class/es nested in the appropriate selector.

e.g. @apply hover:text-red => &:hover { @apply text-red; }

It handles all the provided Tailwind variants and has an option to specify additional custom variants and the selector that should be applied.

Hope someone finds it useful! It's my first PostCSS plugin so please feel free to provide any suggestions/enhancements!

[minimit]

Watch out right now postcss-extend-rule has some problems to be resolved:
csstools/postcss-extend-rule#12
csstools/postcss-extend-rule#6
csstools/postcss-extend-rule#10

[DCzajkowski]

FYI @.adamwathan is working on this already: https://twitter.com/adamwathan/status/1293575524254732289

[DCzajkowski]

Can be closed as of https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0 😅