tailwindcss: applyComplexClasses compiler stuck with @apply inside media queries or variants

Describe the problem:

With the new applyComplexClasses if you put @apply the old way: inside a @screen (media query) or a &:hover (variant), the complier gets stuck (using postcss loader in webpack).

Link to a minimal reproduction:

This css makes the compiler gets stuck (apply content can be anything):

.selector {
  @screen md {
    @apply w-2/6;
  }
}

.selector {
  &:hover {
    @apply text-white;
  }
}

I know the I should use the new way to @apply md:w-2/6 and @apply hover:text-white, but for backward compatibility could be good fixing this bug, or at least give an error in the compiler, right now it just gets stuck compiling.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 20 (14 by maintainers)

Most upvoted comments

It should probably just actually work so if we are going to make any changes to Tailwind making it work is the change I’d want to make. Just trying to offer some workaround in the mean time while I’m at some adventure farm with my 2 year old.

adamwathan on Aug 22, 2020

Please for the love of god someone just make a GitHub repository so I don’t have to make one from scratch and I can probably fix it in 5 minutes between dad duty, but if I have to do it all myself it’ll be days before I have a chance to play with it.

adamwathan on Aug 22, 2020

The bubble option in postcss-nested seems to just do nothing currently which is a problem. Need to configure it to bubble screen rules like this:

module.exports = {
  plugins: {
    'postcss-nested': {
      bubble: ['screen'],
    },
    tailwindcss: {},
  },
}

But it’s not bubbling them 😕

adamwathan on Aug 22, 2020

@adamwathan Created one for you: https://github.com/thecrypticace/at-apply-stuck

thecrypticace on Aug 22, 2020

This is a tough one to fix but I’m sure we can sort it out. In the mean time I would move your nesting plugin before Tailwind so that there is no nested CSS left once the CSS is processed by Tailwind.

adamwathan on Aug 19, 2020