Yumma CSS 3.26

Yumma CSS 3.26 ships first-party bundler plugins. Before this release, you ran 2 processes side by side - your dev server & yummacss watch - usually glued together with concurrently. That workaround is gone.

"dev": "concurrently \"next dev --turbopack\" \"yummacss watch\"""dev": "next dev --turbopack"

Both plugins share the same mechanism. Add the @yummacss; marker to your CSS entry file & the plugin replaces it with generated CSS - rebuilt automatically as you edit your source files.

@yummacss;

PostCSS Plugin

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

npm install -D @yummacss/postcss

export default {  plugins: {    "@yummacss/postcss": {},  },};

New classes appear as you type, newly created files are picked up automatically, & next build generates the final CSS in the same pass.

Vite Plugin

Use @yummacss/vite for Vite & every Vite-based framework like: SvelteKit, Astro, Nuxt, Solid, & plain Vite.

npm install -D @yummacss/vite

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

ICYMI: A Bigger Scale

Yumma CSS 3.25 extended the spacing & sizing scale from 0-100 to 0-384 - up to 96rem. This covers width & height (including min-* & max-* variants, block-size, & inline-size), margin, padding, insets, gap (including column-gap & row-gap), flex-basis, & scroll-margin / scroll-padding.

<div class="w-384 px-160"></div>

Check the changelog for the full list of changes.