Tailwindcss: @apply requires prefix in >= v1.5

Created on 17 Jul 2020  路  3Comments  路  Source: tailwindlabs/tailwindcss

Describe the problem:

Per the docs for v1.4.7, you can optionally omit the configured prefix when using @apply:

/* Both of these will work */
.btn {
  @apply tw-font-bold tw-py-2 tw-px-4 tw-rounded;
}
.btn {
  @apply font-bold py-2 px-4 rounded;
}

Now in 1.5.0 and 1.5.1, only the first way will actually work, where the second will give you the old

`@apply` cannot be used with `.font-bold` because `.font-bold` either cannot be found or [...]

Reproduction repository here

Most helpful comment

I haven't been able to track down the precise cause of this (and therefore can't figure out how to write a test for it 馃槱) but I was able to reproduce and determine the high-level cause and have pushed out a fix in v1.5.2:

https://github.com/tailwindcss/tailwindcss/commit/ab12ab96364a1d20a57a626390eababb6a77c004

Thanks for the report 馃憤

All 3 comments

Yep, I can confirm that I started to experience this problem after updating to 1.5.1 and only the first way is working.

I'm experiencing what I would imagine is a related issue when trying to upgrade to v1.5.1. I cannot use @apply when using a CSS select (e.g. #app) for the important configuration.

Removing the configuration or setting it to true fixes the issue.

I haven't been able to track down the precise cause of this (and therefore can't figure out how to write a test for it 馃槱) but I was able to reproduce and determine the high-level cause and have pushed out a fix in v1.5.2:

https://github.com/tailwindcss/tailwindcss/commit/ab12ab96364a1d20a57a626390eababb6a77c004

Thanks for the report 馃憤

Was this page helpful?
0 / 5 - 0 ratings