svelte with sass and tailwind apply semicolon expected

Question

In my svelte project I am using tailwind and sass for styling. But It is resulting an error

[!] (plugin svelte) ParseError: Semicolon or block is expected
[0] src/App.svelte
[0] 10368: @tailwind components;
[0] 10369: h1 {
[0] 10370:   @apply text-black bg-white !important;
[0]                                     ^
[0] 10371: }</style>

according to tailwind docs I am using #{!important} instead of !important in style tag.

App.svelte

<script lang="ts">
</script>

<main>
    <style>
    </style>
    <h1 class="is-size-1 text-white">Hello World!</h1>
    <p>
        Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
        how to build Svelte apps.
    </p>
</main>

<style lang="scss">
    @import "bulma/bulma.sass";
    @import "tailwindcss/utilities";
    @import "tailwindcss/base";
    @import "tailwindcss/components";
    h1 {
        @apply text-black bg-white #{!important};
    }
</style>

I am not understanding why this error is occuring.