Norska uses a custom scale for all dimension-based classes.
The same scale is used for the following classes.
.max-w-*for controlling the width
.max-h-*for controlling the min width
.p-*for controlling the padding
.m-*for controlling the margin
.border-*for controlling the border width
The rationale is that I found having the same scale for handling both the dimensions and the spacing of elements made every alignment easier.
The scale used by Norska is very different from the default Tailwind scale.
n+1is bigger than
2*nis not twice as large as
Values smaller that
1 can be achieved using the steps
Very very small values (we're talking 1 or 2 pixels) can be used with
All values of the default scale are expressed in
rem. When a value is in another unit, the last characters of the key indicate the value (
Some values might not be available if they don't make sense in a specific
.-h-* classes allow setting dimensions expressed as full width/height of the container, minus
.-h-5 will take the whole container height, minus
5 on the scale. Similarly,
.-w-25p is the same as
The following table displays all the available spacing. For the sake of clarity, it exposes them when used on a width, but they are equally available on all other relevant classes