Tailwindcss: Using !important with @apply causes error when compiling sass files

[joe-reed]

When using laravel-mix to compile .scss or .sass, the following code does not compile:

// main.scss
@tailwind preflight;
@tailwind components;

.example-component {
  @apply .text-black !important;
}

@tailwind utilities;

Gives the error:

Invalid CSS after "...ply .text-black": expected "}", was "!important;"

I have created a repository with full instructions on how to reproduce:
https://github.com/kiteframe/tailwind-important-sass

The issue does not occur when using a .less file and mix.less().

Thank you for all your hard work with Tailwind!

[tlgreg]

It seems like a sass error, so postcss/tailwind didn't run yet.

All tailwind could do here is make all applied rules important maybe with a configuration option, but then you can't have ones without it.

[adamwathan]

Yep this is a Sass issue but the fix is just to interpolate the !important bit so Sass doesn't process it:

.example-component {
  @apply .text-black #{!important};
}

[joe-reed]

Thanks Adam! Would you be open to me creating a PR on the docs to add this in as a "Note for Sass users"?

[adamwathan]

Sure sounds good to me 👍

[reppair]

After loosing an hour of my life finally found the solution here! Interpolation fixes it indeed! Thanks!