Installation

Install Yumma CSS using a bundler plugin, the CLI, or CDN.

Set up Yumma CSS

Follow these steps to get started with Yumma CSS.

Use the @yummacss/vite plugin with Vite & Vite-based frameworks like SvelteKit, Astro, Nuxt, & Solid. Generated CSS is rebuilt automatically as you work.

  1. 1

    Install Yumma CSS

    pnpm add yummacss @yummacss/vite -D
  2. 2

    Add the Plugin

    Register the plugin in your Vite configuration.

    vite.config.ts
    import { defineConfig } from "vite";import yummacss from "@yummacss/vite";export default defineConfig({  plugins: [yummacss()],});
  3. 3

    Configure Sources

    Specify the locations/paths of your project files in the config file.

    yumma.config.mjs
    import { defineConfig } from "yummacss";export default defineConfig({  source: ["./src/**/*.{ts,tsx}"],});
  4. 4

    Add the Marker

    Add the @yummacss; marker to your CSS entry file. The plugin replaces it with generated CSS.

    src/styles.css
    @yummacss;