Installation

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

Set up framework

Add Yumma CSS to your framework of choice with a single plugin.

Use with Vite

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;

Use with Next.js

Use the @yummacss/postcss plugin with Next.js. It works with both Turbopack & Webpack through the built-in PostCSS support.

  1. 1

    Install Yumma CSS

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

    Configure PostCSS

    Register the plugin in your PostCSS configuration.

    postcss.config.mjs
    export default {  plugins: {    "@yummacss/postcss": {},  },};
  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 global CSS file. The plugin replaces it with generated CSS.

    globals.css
    @yummacss;

The PostCSS plugin works anywhere PostCSS runs - not just Next.js.

Set up standalone

Yumma CSS can be used on its own, without a framework.

Use with CLI

Prefer generating a plain CSS file? Install Yumma CSS with your favorite package manager & use the CLI:

  1. 1

    Install Yumma CSS

    pnpm add yummacss -D
  2. 2

    Initialize Configuration

    Create a configuration file in your project.

    pnpm dlx yummacss init
  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}"],  output: "./src/styles.css",});
  4. 4

    Build styles

    Start using Yumma CSS classes, then generate your styles.

    pnpm dlx yummacss build

Use with CDN

Import Yumma CSS directly into your HTML file via CDN for quick prototyping.

  1. 1

    Import Script

    <script src="https://unpkg.com/@yummacss/runtime"></script>
  2. 2

    Start Styling

    index.tsx
    <body className="bg-black">
  <h1 className="c-white">Hello World</h1>
</body>