"Semicolon or block is expected" error when using tailwind responsive classes in svelte-kit style tags

Question

When using tailwind responsive classes (ex: md:my-auto, focus:ring-0, focus:outline-none) in svelte kit component style tags, I get the following error:

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)
    at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)
    at new Parser$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/var/www/html/node_modules/svelte/compiler.js:16919:21)
    at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)
    at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)
    at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)
    at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)

Here is the code for my component:

<script>
    export let switched = false;
</script>
<button class="switch-button transition-transform transform ease-in-out duration-300" class:-rotate-180={switched}
        on:click={()=>{switched = !switched}}>
    <span class="text-2xl md:hidden"><i class="fas fa-arrow-down"></i></span>
    <span class="text-xl hidden md:inline"><i class="fas fa-arrow-right"></i></span>
</button>
<style lang="postcss" type="text/postcss">
    .switch-button {
        @apply border-none appearance-none md:my-auto my-2 font-bold text-center rounded-full h-12 w-12 bg-red-500 text-white;
    }
    .switch-button:focus{
        @apply outline-none;
    }
    .switch-button:active{
        @apply bg-red-300;
    }
</style>

I'm unsure what's causing this issue in particular. I have a feeling it might just be a svelte-kit bug. I know there are work arounds like using vanilla css for responsiveness instead of tailwind classes, or using an external css files, but I would rather not use those options as I very much like the tailwind classes.

Please let me know if you know what's happening here, or if you need more information regarding my projects environment, please let me know. Thanks in advance!

Link to my projects source code: https://github.com/DriedSponge/GorillianCurrencyConversion

Version information:

• svelte-kit: 1.0.0-next.109
• tailwindcss: 2.1.2
• vite: 2.3.4

(I do have jit enabled on tailwind)

Evie

I have the same issue but only when running tests with jest. Have you managed to make it work with the tests ? here is my issue: #68827837 – Bareheaded

Answer 1

It looks like you need to add a Svelte preprocessor to handle your PostCSS syntax (which Tailwind uses since it's a PostCSS plugin). Since you already have svelte-preprocess installed in your package.json, you only need to add postcss-load-config to allow svelte-preprocess to find your postcss.config.js.

Install postcss-load-config with:

npm install --save-dev postcss-load-config

Next, you'll want to configure your svelte.config.js file to use svelte-preprocess. In your case, you'll want your svelte.config.js file to look like this:

import adapter from '@sveltejs/adapter-static'
// import the preprocessor
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // added these lines:
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null,
    }),
  },
}

export default config

I believe that this should work, but when I tried it out, your styles seemed to break. To remedy this, I moved the @tailwind directives out of your __layout.svelte and into an app.postcss file (next to your app.html, inside /src/src). Use this stylesheet in your __layout.svelte by importing it with:

<script>
    import '../app.postcss'
</script>
<main>
<-- rest of your layout -->
</main>
<style lang="postcss">
    @import url('...');
    :global(body)  {
        background-color: #0E1013;
        font-family: Roboto, sans-serif;
    }
</style>

For your next project, maybe consider using svelte-add to install Tailwind, which (should) take care of everything for you. These fixes were based on the files it adds for you.

Sheldonshelduck

Answer 2

Faced the same error. Had everything set up exactly like @person_v1.32 described, the build was working fine, but VSCode gave me the error. Turned out for me it was caused by using a monorepo where svelte was used in a module/package only.

Fix ? Specifying the postcss/tailwind configs with absolute path.

• svelte.config.js:

import sveltePreprocess from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const postcssConfig = path.join(__dirname, 'postcss.config.cjs');

export default {
  preprocess: [
    vitePreprocess(),
    sveltePreprocess({
      postcss: {
        configFilePath: postcssConfig
      }
    })
  ]
};

• postcss.config.cjs

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const path = require('path');
const tailwindConfig = path.join(__dirname, 'tailwind.config.cjs');

const config = {
  plugins: [
    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
    tailwindcss({ config: tailwindConfig }),
    //But others, like autoprefixer, need to run after,
    autoprefixer
  ]
};

module.exports = config;

Pena

Answer 3

Add "files.associations": {"*.svelte": "html" } inside your VSCode settings

Monger

This is not recommended anymore. See marketplace.visualstudio.com/… : If you added "files.associations": {"*.svelte": "html" } to your VSCode settings, remove it. – Pena