Can't use !important with @apply · Issue #224 · tailwindlabs/discuss

I'm using tailwindcss with Laravel Mix and when I use !important with @apply it results in an error. The following is part of a button component scss file:

.btn--ghost {
    @apply bg-transparent !important;
    @apply border-2;
    &.btn--primary {
        @apply text-primary;
        &:hover,
        &:active,
        &:focus {
            @apply bg-primary;
            @apply text-white;
This is the error produced:
ERROR in ./src/sass/main.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    @apply bg-transparent !important;
      Expected ";".
71 │     @apply bg-transparent !important;
   │                           ^
  src/sass/components/_buttons.scss 71:27  root stylesheet
If I remove the !important everything work fine.
          Have to wrap the !important in Sass's interpolation syntax:
@apply bg-transparent #{!important};
Annoying but necessary because Sass interprets !important as special syntax during the parse phase.