Skip to content

Svelte with Yumma CSS

Setting up Yumma CSS in a Svelte project.

Creating a new project

To create a new Svelte project, you need run the Svelte command in your terminal.

  1. Install Yumma CSS

    Install yummacss using a package manager.

    Installing dependencies...
    npm i yummacss -D

  2. Initialize configuration

    Create a configuration file in your project.

    Terminal
    npx yummacss init
  3. Set up configuration

    Specify the locations of all your project files in the config file.

    yumma.config.js
    export default {
    source: ["./src/**/*.svelte"],
    output: "./src/global.css",
    buildOptions: {
    reset: true,
    minify: false,
    }
    };
  4. Build styles

    You can now start generating your CSS with the build or watch command.

    Terminal
    npx yummacss build
  5. Done!

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

    routes/+page.svelte
    <h1 class="fs-sm fw-700 ta-c tc-indigo">Yumma CSS 🀝 Svelte</h1>

Clone this project

Skip the guide steps entirely with our Svelte starter.

Cloning the project...
git clone https://github.com/yumma-lib/with-svelte.git