Blog/April 14, 2025

Yumma CSS 3.0

A complete internal rewrite, a new CLI, significant performance improvements, & over 50 new utilities.

What's New In V3.0?

Yumma CSS 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. Yumma CSS 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.
Terminal window
```
pnpm add yummacss -D
```

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.

  - node_modules/
  - public
    - favicon.ico
  - src
    - out.css
    - index.html
  - .gitignore
  - package-lock.json
  - package.json
  - **yumma.config.js**

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 and 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 to generate CSS with the CLI.

<!DOCTYPE html>
<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 class="b-1 bs-sm p-4 bg-white bc-silver-2 rad-2">
      <h1 class="fw-600 fs-lg tc-indigo">Hello 👋, name's Renildo.</h1>
      <p class="tc-gray-7">I'm the Founder of Yumma CSS!</p>

      <button class="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.

.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.

Added Background Attachment utilities.
Added Background Clip utilities.
Added Background Origin utilities.
Added Background Position utilities.
Added Background Repeat utilities.
Added Background Size utilities.
Added Blur utilities.
Added Border Spacing utilities.
Added Bottom Radius utilities.
Added Top/Right/Bottom/Left (Axis) utilities.
Added Clear utilities.
Added Field Sizing utilities.
Added Fill utilities.
Added Font Family fallbacks.
Added Grayscale utilities.
Added Isolation utilities.
Added Left Radius utilities.
Added Letter Spacing utilities.
Added List Style Position utilities.
Added Margin Block End utilities.
Added Margin Block Start utilities.
Added Margin Inline End utilities.
Added Margin Inline Start utilities.
Added Order utilities.
Added Padding Block End utilities.
Added Padding Block Start utilities.
Added Padding Inline End utilities.
Added Padding Inline Start utilities.
Added Place Content utilities.
Added Place Items utilities.
Added Place Self utilities.
Added Right Radius utilities.
Added Rotate utilities.
Added Scale utilities.
Added Scroll Behavior utilities.
Added Scroll Margin Bottom utilities.
Added Scroll Margin Inline End utilities.
Added Scroll Margin Inline Start utilities.
Added Scroll Margin Left utilities.
Added Scroll Margin Right utilities.
Added Scroll Margin Top utilities.
Added Scroll Margin X utilities.
Added Scroll Margin Y utilities.
Added Scroll Margin utilities.
Added Scroll Snap Align utilities.
Added Scroll Snap Stop utilities.
Added Scroll Snap Type utilities.
Added Skew utilities.
Added Stroke Width utilities.
Added Stroke utilities.
Added Text Indent utilities.
Added Text Overflow utilities.
Added Text Transform utilities.
Added Text Underline Offset utilities.
Added Text Wrap utilities.
Added Top Radius utilities.
Added Transform Origin utilities.
Added Visibility utilities.
Added White Space utilities.

Check the release notes for a full list of new utilities.

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";
```

Add the Yumma config file

Create a yumma.config.js file at the project root.

├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── globals.css
│   └── index.html
├── .gitignore
├── package-lock.json
├── package.json
└── yumma.config.js <-

Set up the config file

Setup the source array and output string field.

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.
Terminal window
```
pnpx yummacss build
```

Changes In 3.0

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

Dependency Changes

Yumma CSS 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.

- dist
   - yumma.css
   - yumma.min.css

Color Utility Changes

In v3.0, both the light (l-) and 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 class="bg-l-indigo-6 h:bg-d-indigo-1">Button</button>
<button class="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 will become lighter, and dark colors will become darker.

Here's a quick reference using background-color

v2	v3.0	Difference
*-l-indigo-6	*-indigo-1	-2 characters
*-l-indigo-5	*-indigo-2	-2 characters
*-l-indigo-4	*-indigo-3	-2 characters
*-l-indigo-3	*-indigo-4	-2 characters
*-l-indigo-2	*-indigo-5	-2 characters
*-l-indigo-1	*-indigo-6	-2 characters
*-indigo	*-indigo	-0 characters
*-d-indigo-1	*-indigo-7	-2 character
*-d-indigo-2	*-indigo-8	-2 character
*-d-indigo-3	*-indigo-9	-2 character
*-d-indigo-4	*-indigo-10	-1 character
*-d-indigo-5	*-indigo-11	-1 character
*-d-indigo-6	*-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 and consistent. These changes are turned on by default, but you can turn them off using the config file.

By default, all paddings will be removed.

* {
  margin: 0;
  padding: 0;
}

Font family is set in the <html> tag element. - oshwcomeau.com

html {
  font-family: vars.$yma-font-system;
}

Font rendering is smoother, and a consistent system font is set as the default. - oshwcomeau.com

body {
  -webkit-font-smoothing: antialiased;
  font-family: vars.$yma-font-system;
  line-height: 1.5;
}

Form elements now include padding by default. Borders are added for form elements without class attributes.

button,
input,
optgroup,
select,
textarea {
  background-color: vars.$yma-color-transparent;
  font-family: inherit;
  padding: 0.5rem;
}

button:not([class]),
input:not([class]),
optgroup:not([class]),
select:not([class]),
textarea:not([class]) {
  border: 1px solid vars.$yma-color-silver;
}

Interactive elements have clear outlines for accessibility.

button,
input,
textarea,
select,
a,
summary {
  &:focus {
    outline: 2px solid vars.$yma-color-transparent;
  }
}

In the absence of content, textareas will exhibit a default height. - piccalil.li

textarea:not([rows]) {
  min-height: 10em;
}

Disabled elements are visually distinct with reduced opacity and a "not-allowed" cursor.

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

Headings adopt balanced text wrapping, consistent font sizes, and bold weights. - oshwcomeau.com

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  font-weight: 600;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Small text and code elements are consistently scaled and inherited. Code elements will have consistent font family. - modern-normalize

b,
strong {
  font-weight: 700;
}

small {
  font-size: 80%;
  line-height: 1.4;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

Reset default link styles.

a {
  color: inherit;
  text-decoration: none;
}

Table headers are bold and sized consistently.

th {
  font-size: 1rem;
  font-weight: 600;
}

Horizontal rules, details, and summaries are updated for better spacing and display. - modern-normalize

hr {
  border-top: 1px solid vars.$yma-color-silver;
  height: 0;
  margin: 1em 0;
}

details {
  display: block;
}

summary {
  display: list-item;
}

Disabling Base Styles

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

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

Breakpoint Changes

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

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

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 class="ac-s ..."></div>
<div class="ac-st ..."></div>

Align Items

<div class="ai-s ..."></div>
<div class="ai-st ..."></div>

Align Self

<div class="as-s ..."></div>
<div class="as-st ..."></div>

Justify Content

<div class="jc-s ..."></div>
<div class="jc-st ..."></div>

Border Bottom Radius

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

Border Left Radius

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

Border Right Radius

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

Border Top Radius

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

Top / Right / Bottom / Left

<div class="dir-b">...</div>
<div class="dir-i">...</div>
<div class="dir-l">...</div>
<div class="dir-r">...</div>
<div class="dir-t">...</div>
<div class="bo-">...</div>
<div class="i-">...</div>
<div class="l-">...</div>
<div class="r-">...</div>
<div class="t-">...</div>

Columns

<div class="cols-* ..."></div>
<div class="c-* ..."></div>

Dimension

<div class="dim-* ..."></div>
<div class="d-* ..."></div>

Max Dimension

<div class="max-dim-* ..."></div>
<div class="max-d-* ..."></div>

Min Dimension

<div class="min-dim-* ..."></div>
<div class="min-d-* ..."></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 class="ovf-* ..."></div>
<div class="o-* ..."></div>

Overflow X

<div class="ovf-x-* ..."></div>
<div class="o-x-* ..."></div>

Overflow Y

<div class="ovf-y-* ..."></div>
<div class="o-y-*..."></div>

Float

<div class="flo-* ..."></div>
<div class="fl-* ..."></div>

Dimension, Height & Width

<div class="d-1/1 ..."></div>
<div class="h-1/1 ..."></div>
<div class="w-1/1 ..."></div>
<div class="d-dvh ..."></div>
<div class="h-dvh ..."></div>
<div class="w-dvh ..."></div>

Removed Container Utility

<div class="cnt"></div>

Removed Insert Utility

<div class="ins ..."></div>
<div class="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 class="d-if fd-r cg-8 tc-white">
  <div class="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div class="d-f d-16 ai-c jc-c bg-indigo"></div>
  <div class="d-f d-16 ai-c jc-c bg-indigo"></div>
</div>

Removed Spacing Y Utilities

The same applies to Column Gap utilities.

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

Removed `*-1/2` Property Values

Turns out it wasn't very useful at all.

<div class="h-1/2 ..."></div>
<div class="w-1/2 ..."></div>
<div class="d-1/2 ..."></div>

Upgrade

Check the Upgrading Guide for a full list of utility renames & removals.

pnpm up yummacss@latest