ParseError: Semicolon or block is expected

[drthoben]

Describe the bug

I'm using SvelteKit with TailwindCSS. The following code produces an error:

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<style>
  h1 {
    @apply dark:text-red-500;
  }
</style>

However, the same block of css code inside of a .css file works as expected.

Reproduction

https://github.com/drthoben/sveltekit-tailwind

Logs

500
Semicolon or block is expected
4: <style>
5:   h1 {
6:     @apply dark:text-red-500;
                  ^
7:   }
8: 
ParseError: Semicolon or block is expected
    at error (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:17698:19)
    at Parser$1.error (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:17774:9)
    at Object.read_style [as read] (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:14106:20)
    at tag (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:16857:33)
    at new Parser$1 (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:17733:21)
    at parse$3 (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:17865:20)
    at compile (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/svelte/compiler.mjs:31310:17)
    at compileSvelte (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:318:20)
    at async TransformContext.transform (file:///Users/amadeus/Code/sveltekit-tailwind/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1374:27)
    at async Object.transform (/Users/amadeus/Code/sveltekit-tailwind/node_modules/vite/dist/node/chunks/dep-36bf480c.js:50373:30)

System Info

System:
    OS: macOS 11.1
    CPU: (8) arm64 Apple M1
    Memory: 239.81 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.21.1 - ~/.nvm/versions/node/v16.9.1/bin/npm
    Watchman: 2021.08.02.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 93.0.4577.82
    Safari: 14.0.2
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.170
    svelte: ^3.42.6 => 3.42.6

Severity

annoyance

Additional Information

Thank you a million times for this framework. Just started using it and I already love it.

[benmccann]

You should run SvelteKit with a preprocessor to convert PostCSS to CSS so that Svelte knows how to handle it. This error is coming from Svelte itself, which probably means there's some error in the preprocessor converting it to valid CSS. I know lots of people are using Tailwind without issue, so my first guess would be that something is set something up wrong. Try setting up your project with https://github.com/svelte-add/tailwindcss, which is pretty popular and works well

I'm going to close this since it's not a bug in SvelteKit itself. It would most likely be in the preprocessor if there were a bug instead of a usage issue

[drthoben]

Thank you, setting it up with svelte-add solved it for me.

The postcss: true option was missing in svelte.config.js.