Blog/December 31, 2025

Yumma CSS 3.7

Is 2025 almost over? Before that happens we have to release Yumma CSS 3.7!

This update might change existing features, make sure you check out the check out the release notes before upgrading.

New utility variants

We added px to all border and gap utilities.

Border utilities

A	B
C	D

<table class="bw-1 bc-silver-4 bs-px w-full">
  <tbody>
    <tr>
      <td class="bw-1 bc-silver-4 p-4 ta-c c-slate">A</td>
      <td class="bw-1 bc-silver-4 p-4 ta-c c-slate">B</td>
    </tr>
    <tr>
      <td class="bw-1 bc-silver-4 p-4 ta-c c-slate">C</td>
      <td class="bw-1 bc-silver-4 p-4 ta-c c-slate">D</td>
    </tr>
  </tbody>
</table>

Gap utilities

<div class="g-px d-g gtc-3 c-white">
  <div class="ai-c bg-indigo d-f jc-c p-4">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-4">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-4">C</div>
  <div class="ai-c bg-indigo d-f jc-c p-4">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4">E</div>
</div>

Height and Width utilities

The new stretch property is a part of the CSS spec and while it is not supported in all browsers, we added the utilities to Yumma CSS.

<div class="w-s h-s bg-indigo"></div>

This also valid for dimension utilities.

<div class="d-s bg-indigo"></div>

All-new utilities

Before the new year we wanted to add a couple of new utilities to Yumma CSS.

These are all well supported in all major browsers.

Tab Size utilities

Class	Style
`ts-0`	`tab-size: 0;`
`ts-2`	`tab-size: 2;`
`ts-4`	`tab-size: 4;`
`ts-8`	`tab-size: 8;`

Vertical Align utilities

Class	Style
`va-b`	`vertical-align: bottom;`
`va-ba`	`vertical-align: baseline;`
`va-m`	`vertical-align: middle;`
`va-s`	`vertical-align: sub;`
`va-su`	`vertical-align: super;`
`va-t`	`vertical-align: top;`
`va-tb`	`vertical-align: text-bottom;`
`va-tt`	`vertical-align: text-top;`

Writing Mode utilities

Class	Style
`wm-htb`	`writing-mode: horizontal-tb;`
`wm-slr`	`writing-mode: sideways-lr;`
`wm-srl`	`writing-mode: sideways-rl;`
`wm-vlr`	`writing-mode: vertical-lr;`
`wm-vrl`	`writing-mode: vertical-rl;`

Extend Top/Right/Bottom/Left utilities

I don't know if you will ever even use this, but now top, right, bottom, left and inset utilities now ranges from 0-100.

<div class="p-r d-18 sm:d-32 c-white">
  <div class="p-a i-100 b-1"></div>
  <div class="p-a t-100 r-100 d-f d-12 ai-c jc-c bg-indigo p-4">A</div>
</div>

Renamed utilities

This update it's pretty much destructive as it contains quite a few breaking changes. We renamed some of existing utilities to truly make this a true abbreviation convention.

Border Radius utilities

<div class="rad-9">...</div>
<div class="br-pill">...</div>

Border Width

<div class="b-*">...</div>
<div class="bw-*">...</div>

Border Top Width

<div class="bt-*">...</div>
<div class="btw-*">...</div>

Border Right Width

<div class="br-*">...</div>
<div class="brw-*">...</div>

Border Left Width

<div class="bl-*">...</div>
<div class="blw-*">...</div>

Border Bottom Width

<div class="bb-*">...</div>
<div class="bbw-*">...</div>

Color utilities

<div class="tc-{color}">...</div>
<div class="c-{color}">...</div>

Oh, and...

Happy new year!

Upgrade

You can get the latest version of Yumma CSS from npm:

npm install yummacss@latest