Blog/December 31, 2025

Yumma CSS 3.7

New utility variants for border, gap, & dimension utilities, along with refined text utilities.

Utility Variants

The px variant is now available for border & gap utilities.

Border Utilities

A	B
C	D

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

Gap Utilities

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

Dimension Utilities

The stretch property is added to height, width, & dimension utilities.

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

New Utilities

This release introduces several text & positioning utilities.

Tab Size

Class	Property
`ts-2`	`tab-size: 2`
`ts-4`	`tab-size: 4`
`ts-8`	`tab-size: 8`

Vertical Align

Class	Property
`va-ba`	`vertical-align: baseline`
`va-m`	`vertical-align: middle`
`va-t`	`vertical-align: top`
`va-b`	`vertical-align: bottom`
`va-s`	`vertical-align: sub`
`va-su`	`vertical-align: super`

Writing Mode

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

Positioning Utilities

The range for top, right, bottom, left, & inset is extended to 0-100.

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

Renamed Utilities

Several utilities are renamed to follow a more consistent abbreviation convention.

Border Radius

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

Border Style

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

Color Utilities

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

Upgrade

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

pnpm up yummacss@latest