Skip to content

Add Yumma CSS in Svelte

  1. Install Yumma CSS:

    Install the Yumma CSS Library using a package manager.

    Installing dependencies...
    npm i yummacss@latest
  2. Add yummacss to your main CSS file:

    Create a new /src/global.css file

    src/global.css
    /* Minified Version */
    @import "/node_modules/yummacss/dist/yumma.min.css";
  3. Import the CSS file

    Create a /src/routes/+layout.svelte file

    routes/+layout.svelte
    <script>
    import "../global.css";
    </script>
    <slot />
  4. Getting ready for development:

    Start your application using npm run dev.

    Terminal
    npm run dev
  5. Use Yumma CSS in your project:

    You’re all set to start using Yumma CSS utility classes in your project.

    /routes/+page.svelte
    <div class="h-1/1 ins">
    <h1 class="fs-xxl fw-500 tc-pink">Yumma CSS + Svelte</h1>
    </div>

Still stuck?

If you’re having trouble with Yumma CSS, clone this Svelte example.

Cloning repository...
git clone https://github.com/yumma-lib/svelte-yummacss-example.git