tailwindlabs/tailwindcss-jit

Wrong output order when using multiple @apply rules

sboerrigter opened this issue · 1 comments

What version of @tailwindcss/jit are you using?

v0.1.7

What version of Node.js are you using?

v.15.something

What browser are you using?

Chrome

What operating system are you using?

macOs

I noticed that the CSS output is in the wrong order if you use multiple @apply rules like this:

h1 {
  @apply text-2xl;
  @apply sm:text-3xl;
}

With this example the sm:text-3xl rule is overwritten by text-2xl.

It does work as expected when I combine the rules in one @apply statement like this:

h1 {
  @apply text-2xl sm:text-3xl;
}

I wasn't sure if this is related to existing issues about @apply. If so, sorry for the duplicate issue 🙃.

Hey thanks for reporting! I am not totally surprised by this, definitely some things to iron out here. Will try and take a look this week!