Blog/August 19, 2025

Yumma CSS 3.2

Introduction of new box model, border radius, & color utilities, along with size values from the breakpoint system.

New utility variants

New values are now available for box model & border radius utilities.

Box model pixel values

Use px to set the dimension, height, or width of an element to 1px.

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

Use px to set the padding or margin of an element to 1px.

<div class="m-px"></div>
<div class="p-px"></div>

Box model viewport units

Yumma CSS v3.2 adds viewport-percentage length units:

*-dvw: Apply 100dvw to an element.
*-vh: Apply 100vh to an element.
*-vw: Apply 100vw to an element.

<div class="d-dvw ..."></div>
<div class="h-vh ..."></div>
<div class="w-vw ..."></div>

Size utility values

The 0-100 range scale has limitations for Dimension, Height, & Width. This release adds size values directly from the breakpoint system.

Class	Value
`*-sm`	`40rem`
`*-md`	`48rem`
`*-lg`	`64rem`
`*-xl`	`80rem`
`*-xxl`	`96rem`

Border radius utilities

Use 9 in rad-* utilities to apply a border-radius of 9999px for perfectly rounded corners.

<button class="b-0 py-2 px-5 bg-indigo h:bg-indigo-8 fw-600 c-p rad-9 tc-white">Subscribe</button>

Slate color utility

The lead color utility is renamed to slate for better accuracy. Find & replace all instances of -lead with -slate in your project.

<div class="bg-lead ..."></div>
<div class="bg-slate ..."></div>

New currentColor variant

All color utilities now support the currentColor value via the *-current utility, making it easier to build themeable components.

<div class="tc-blue">
  <svg class="w-10 h-10 f-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <circle cx="8" cy="8" r="8" />
  </svg>
</div>

Upgrade

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

pnpm up yummacss@latest