Skeleton utilizes the power of Tailwind to provide a universal system for customizing spacing throughout your application. Enabling customization of this setting per each theme.
--spacing: 0.25rem80
72
64
60
56
52
48
44
40
36
32
28
24
20
16
14
12
11
10
9
8
7
6
5
4
3.5
3
2.5
2
1.5
1
0.5
How It Works
In legacy versions of Skeleton, this was implement using custom mechanisms. However, starting Skeleton v3.0.0 and Tailwind 4.0.0, this now utilizes the official Tailwind Spacing property.
@layer theme {
:root {
--spacing: 0.25rem;
}
}With the added benefit this can be easily customized per Skeleton theme.
[data-theme='cerberus'] {
--spacing: 0.25rem;
}Supported Properties
The scaling system supports all relevant Tailwind utility classes, including, but not limited to:
padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate