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

user_12596476 0
Viewed 2172

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)

sveltekit tailwind-css svelte
2 Answers

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.

user_91298320

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

user_124909900
Related