How to fix css lint when writing Tailwind inside Svelte style tag

This article was published on Aug 07, 2021, and takes less than a minute to read.

Tailwind allow us to write the following CSS code:

  .overlay {
    @apply absolute left-0 right-0 bottom-0 bg-black bg-opacity-75;
    top: var(--nav-height);
  }

The problem is that @apply isn't a CSS feature. Which means while writing a Svelte component which have such feature:

<div class="overlay" />

<style>
  .overlay {
    @apply absolute left-0 right-0 bottom-0 bg-black bg-opacity-75;
    top: var(--nav-height);
  }
</style>

You'll get a bunch of errors like: `semi-colon expected css(css-semicolonexpected)`.

To fix that all you need to do is specifying the language you're writing the style, in our case, postcss:

<div class="overlay" />

<style lang="postcss">
  .overlay {
    @apply absolute left-0 right-0 bottom-0 bg-black bg-opacity-75;
    top: var(--nav-height);
  }
</style>

And the error is gone!