Unit

Utility for controlling the grid cell size of an element.

Usage

The new unit utility can be used to adjust the relative sizing for an individual element and its children. This can be useful for creating different size variants of a component.

<div class="w-5 h-5 flex flex-col items-center justify-center">
  <!-- Normal scaling -->
  <button class="px-1/2 py-1/8 min-w-5 rounded-1/4 bg-gray-600 text-white">
    Button
  </button>

  <!-- Scaled 3/4 of original size -->
  <button class="px-1/2 py-1/8 min-w-5 rounded-1/4 bg-gray-600 text-white unit-3/4">
    Button 3/4
  </button>
</div>

Classes

Class	Size	Pixels
unit-1/8	0.125	3px
unit-2/8	0.25	6px
unit-3/8	0.375	9px
unit-4/8	0.5	12px
unit-5/8	0.625	15px
unit-6/8	0.75	18px
unit-7/8	0.875	21px
unit-1/5	0.2	4.8px
unit-2/5	0.4	9.6px
unit-3/5	0.6	14.4px
unit-4/5	0.8	19.12px
unit-1/4	0.25	6px
unit-2/4	0.5	12px
unit-3/4	0.75	18px
unit-1/3	0.333	7.992px
unit-2/3	0.666	16.008px
unit-1/2	0.5	12px
unit-1	1	24px
unit-1-1/8	1.125	27px
unit-1-2/8	1.25	30px
unit-1-3/8	1.375	33px
unit-1-4/8	1.5	36px
unit-1-5/8	1.625	39px
unit-1-6/8	1.75	42px
unit-1-7/8	1.875	45px
unit-1-1/5	1.2	28.8px
unit-1-2/5	1.4	33.6px
unit-1-3/5	1.6	38.4px
unit-1-4/5	1.8	43.12px
unit-1-1/4	1.25	30px
unit-1-2/4	1.5	36px
unit-1-3/4	1.75	42px
unit-1-1/2	1.5	36px
unit-2	2	48px
unit-2-1/4	2.25	54px
unit-2-2/4	2.5	60px
unit-2-3/4	2.75	66px
unit-2-1/2	2.5	60px
unit-3	3	72px