Blog/April 14, 2025

Yumma CSS 3.0

Moving to TypeScript from SCSS, with a fresh command line interface, performance boosts & a range of new utilities.

What's New in v3.0?

v3.0 features a complete internal & external rewrite to improve design workflows. This release addresses major performance issues while adding & refining core utilities.

All-New CLI

Previous versions required importing large CSS files. v3.0 introduces a CLI that scans your project & automatically removes unused styles, ensuring minimal production file sizes.

1
Install Yumma CSS
Add yummacss to your project as dev dependency.
Learn more about dependency changes.
pnpm add yummacss -D
2
Add the configuration file
Next, add the yumma.config.js to the root level of your project or run pnpx yummacss init to create it for you.
pnpx yummacss init
3
Set up the config file
To generate styles using the CLI, just set up the source array with the path to your template files & set the output string with the path to the CSS file you want to generate.
yumma.config.js
module.exports = { source: ["./src/**/*.html"], output: "./src/out.css", buildOptions: { reset: true, minify: false, },};

Write CSS

Start using Yumma CSS utilities in your markup to generate CSS with the CLI.

<html lang="en">
<head>    <meta charSet="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="/src/out.css" /></head>
<body>  <div className="b-1 bs-sm p-4 bg-white bc-silver-2 rad-2">      <h1 className="fw-600 fs-lg tc-indigo">Hello 👋, name's Renildo.</h1>      <p className="tc-gray-7">I'm the Founder of Yumma CSS!</p>
      <button className="mt-6 px-4 py-1 bg-indigo h:bg-indigo-7 fs-sm tc-white">GitHub</button>  </div></body>
</html>

Compile the SCSS

Compiling source files to CSS is handled with a single command:

pnpx yummacss build

The CLI generates a new CSS file & purges unused styles based on your yumma.config.js.

out.css

.rad-1 {
  border-radius: .25rem;
}

.rad-2 {
  border-radius: .5rem;
}

.b-1 {
  border-width: 1px;
}

.mt-6 {
  margin-top: 1.5rem;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-bottom: .25rem;
  padding-top: .25rem;
}

/* etc */

New Utilities & Variants

To provide a complete design toolkit, this release adds over 50 utilities to the core framework.

Backgrounds. Attachment, clip, origin, position, repeat & size.

Radius. Top, right, bottom & left radius, so a pair of corners is one class.

Logical spacing. Margin & padding gain block start, block end, inline start & inline end.

Layout. Clear, isolation, order, visibility, the top/right/bottom/left axis shorthands & the full place-* set for content, items & self.

Scroll. Behavior, snap align, snap stop, snap type & the whole scroll margin family, including the axis & logical variants.

Typography. Letter spacing, list style position, text indent, text overflow, text transform, text underline offset, text wrap, white space & font family fallbacks.

Effects & transforms. Blur, grayscale, fill, stroke, stroke width, rotate, scale, skew & transform origin.

Plus border spacing & field sizing.

Build Performance

We optimized the codebase to improve build times & reduce overall file size. Utility generation was refined to eliminate duplicate data in the /dist folder.

Metric	v2	v3.0	Improvement
Complete build	13.88 s	3.96 s	-9.92 s (71% faster)
File size (standard)	3.21 MB	2.53 MB	-0.68 MB (21% smaller)
File size (minified)	2.48 MB	1.89 MB	-0.59 MB (24% smaller)
Utilities coverage	111	167	+56

Upgrading from v2 or older to v3.0 via the Yumma CLI is a direct process.

1
Remove Yumma CSS @import rules
The CLI compiles SCSS to CSS, removing the need to import the Yumma CSS package directly.
@import "/node_modules/yummacss/dist/yumma.min.css";
2
Add the Yumma config file
Create a yumma.config.js file at the project root.
node_modules
favicon.ico
globals.cssindex.html
.gitignorepackage-lock.jsonpackage.jsonyumma.config.js

Set up the config file

Set up the source array & output string field.

yumma.config.js

module.exports = {  source: ["./src/**/*.html"],  output: "./src/globals.css",  buildOptions: {    reset: true,    minify: true,  },};

4
Compile the SCSS
Run pnpx yummacss build to compile your styles.
pnpx yummacss build

Changes in 3.0

v3.0 introduces core structural changes. Review the breaking changes below before updating your project.

Dependency Changes

v3.0 should be installed as a dev dependency, as it functions as a CLI tool for generating CSS.

pnpm add yummacss -D

The full utility set remains available in the distribution folder for manual imports.

yumma.cssyumma.min.css

Color Utility Changes

In v3.0, both the light (l-) & dark (d-) characters are being removed across all color utilities. As a result, the range used to determine a color's shade was also adjusted.

<button className="bg-l-indigo-6 h:bg-d-indigo-1">Button</button><button className="bg-indigo-1 h:bg-indigo-7">Button</button>

Also, the color hue is increasing from 10% shade modification to 14%. This means that light colors become lighter & dark colors become darker.

Here's a quick reference using background-color.

v2	v3.0	Difference
(value)-l-indigo-6	(value)-indigo-1	-2 characters
(value)-l-indigo-5	(value)-indigo-2	-2 characters
(value)-l-indigo-4	(value)-indigo-3	-2 characters
(value)-l-indigo-3	(value)-indigo-4	-2 characters
(value)-l-indigo-2	(value)-indigo-5	-2 characters
(value)-l-indigo-1	(value)-indigo-6	-2 characters
(value)-indigo	(value)-indigo	-0 characters
(value)-d-indigo-1	(value)-indigo-7	-2 character
(value)-d-indigo-2	(value)-indigo-8	-2 character
(value)-d-indigo-3	(value)-indigo-9	-2 character
(value)-d-indigo-4	(value)-indigo-10	-1 character
(value)-d-indigo-5	(value)-indigo-11	-1 character
(value)-d-indigo-6	(value)-indigo-12	-1 character

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Base Style Changes

We're making some changes to the base styles in v3.0 to make it more modern & consistent. These changes are turned on by default, but you can turn them off using the config file.

Margins & paddings are reset to 0 on every element.
A consistent system font is set on <html>, & <body> gets antialiased font smoothing with a 1.5 line height. - joshwcomeau.com
Form elements inherit the font family & get 0.5rem of padding. Those without a class attribute also get a border.
Interactive elements get a transparent focus outline for accessibility.
Textareas without a rows attribute get a 10em minimum height. - piccalil.li
Disabled form elements get 0.5 opacity & a not-allowed cursor.
Headings share one font size & weight, with balanced text wrapping; paragraphs get pretty wrapping.
<b> & <strong> are bolder, <small> is scaled down, & code elements share a monospace family. - modern-normalize
Links inherit their color & drop the underline.
Table headers match heading size & weight.
Horizontal rules, <details> & <summary> get consistent spacing & display.

The normalize reference documents the base styles as they are today; the v3.0.0 release notes have the original diff.

Disabling Base Styles

To disable base style generation, set buildOptions.reset to false in yummacss.config.mjs.

yummacss.config.mjs

export default {  source: ["./src/**/*.html"],  output: "./src/out.css",  buildOptions: {    reset: false, // disables base styles    minify: false,  },};

Breakpoint Changes

v3.0 transitions from pixel-based units to rems, improving accessibility & scalability by respecting browser font settings.

Breakpoint	v2	v3.0
`sm`	`640px`	`40rem` (640px)
`md`	`768px`	`48rem` (768px)
`lg`	`1024px`	`64rem` (1024px)
`xl`	`1280px`	`80rem` (1280px)
`xxl`	`1536px`	`96rem` (1536px)

Fixed Media Query Utilities

Related media query utilities are now grouped together, ensuring they correctly override styles in the DOM while reducing CSS file size.

Utility Syntax Changes

We're renaming several utilities to align with our default naming convention.

Align Content

<div className="ac-s …"></div><div className="ac-st …"></div>

Align Items

<div className="ai-s …"></div><div className="ai-st …"></div>

Align Self

<div className="as-s …"></div><div className="as-st …"></div>

Justify Content

<div className="jc-s …"></div><div className="jc-st …"></div>

Border Bottom Radius

<button className="b-1 bg-black rad-bl-2 rad-br-2 tc-white">Subscribe</button><button className="b-1 bg-black rad-b-2 tc-white">Subscribe</button>

Border Left Radius

<button className="b-1 bg-black rad-bl-2 rad-tl-2 tc-white">Subscribe</button><button className="b-1 bg-black rad-l-2 tc-white">Subscribe</button>

Border Right Radius

<button className="b-1 bg-black rad-br-2 rad-tr-2 tc-white">Subscribe</button><button className="b-1 bg-black rad-r-2 tc-white">Subscribe</button>

Border Top Radius

<button className="b-1 bg-black rad-tl-2 rad-tr-2 tc-white">Subscribe</button><button className="b-1 bg-black rad-t-2 tc-white">Subscribe</button>

Top / Right / Bottom / Left

<div className="dir-b">…</div><div className="dir-i">…</div><div className="dir-l">…</div><div className="dir-r">…</div><div className="dir-t">…</div><div className="bo-">…</div><div className="i-">…</div><div className="l-">…</div><div className="r-">…</div><div className="t-">…</div>

Columns

<div className="cols-(value) …"></div><div className="c-(value) …"></div>

Dimension

<div className="dim-(value) …"></div><div className="d-(value) …"></div>

Max Dimension

<div className="max-dim-(value) …"></div><div className="max-d-(value) …"></div>

Min Dimension

<div className="min-dim-(value) …"></div><div className="min-d-(value) …"></div>

| Utility | Property | |---------|----------| | fs-xs | font-size: 0.75rem; | | fs-sm | font-size: 0.875rem; | | fs-b | font-size: 1rem; | | fs-md | font-size: 1.125rem; | | fs-lg | font-size: 1.25rem; | | fs-xl | font-size: 1.5rem; | | fs-xxl | font-size: 1.875rem; | | fs-3xl | font-size: 2.25rem; | | fs-4xl | font-size: 3rem; | | fs-5xl | font-size: 3.75rem; | | fs-6xl | font-size: 4.5rem; | | fs-7xl | font-size: 6rem; | | fs-8xl | font-size: 8rem; |

Font Family

| Utility | Property | |---------|----------| | ff-s | font-family: Charter, Cambria, serif; | | ff-m | font-family: ui-monospace, Consolas, monospace; | | ff-d | font-family: system-ui, sans-serif; |

Overflow

<div className="ovf-(value) …"></div><div className="o-(value) …"></div>

Overflow X

<div className="ovf-x-(value) …"></div><div className="o-x-(value) …"></div>

Overflow Y

<div className="ovf-y-(value) …"></div><div className="o-y-(value)…"></div>

Float

<div className="flo-(value) …"></div><div className="fl-(value) …"></div>

Dimension, Height & Width

<div className="d-1/1 …"></div><div className="h-1/1 …"></div><div className="w-1/1 …"></div><div className="d-dvh …"></div><div className="h-dvh …"></div><div className="w-dvh …"></div>

Removed Container Utility

<div className="cnt"></div>

Removed Insert Utility

<div className="ins …"></div><div className="d-f ai-c jc-c …"></div>

Removed Spacing X Utilities

Row Gap utilities can replace Spacing X in most cases, especially when combined with d-f (display: flex) or d-if (display: inline-flex).

<div className="d-if fd-r cg-8 tc-white">
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
</div>

Removed Spacing Y Utilities

The same applies to Column Gap utilities.

<div className="d-if fd-c rg-8">
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div className="d-f d-16 ai-c jc-c bg-indigo"></div>
</div>

Removed `(value)-1/2` Property Values

Turns out it wasn't very useful at all.

<div className="h-1/2 …"></div><div className="w-1/2 …"></div><div className="d-1/2 …"></div>