How to fix "Semicolon or block is expected" using Tailwind with Svelte

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

Tailwind and Svelte work pretty well together.

We can either define the classes as class or use the PostCSS directive @apply to add styles:

<button class="bg-gray-800">Click here</button>

<style lang="postcss">
  button {
    @apply text-sm;
  }
</style>

The problem is that even marking the style tag language to postcss (so we can have better syntax highlighting, when we use Tailwind modifiers, such as dark, hover, focus, etc., we'll get an error:

Semicolon or block is expected

If you expect this syntax to work, here are some suggestions: 
If you use less/SCSS with `svelte-preprocess`, did you add `lang="scss"`/`lang="less"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(css-syntax-error)

To fix this problem, we have to do two things:

1. Install postcss-load-config:

npm install -D postcss-load-config

This will ensure that our postcss.config.cjs will be properly loaded.

2. Mark postcss to "true" on svelte config:

svelte.config.js 
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
  // ...rest of the config
};

export default config;

After doing that, the errors should be gone.

References