Spacing

The QDS spacing scale is available as CSS variables. When using the QUI Tailwind plugin, your Tailwind theme's spacing scale is automatically extended with QDS values, enabling use with utilities such as margin, padding, and gap.

Examples:

// gap: var(--spacing-50);
<div className="gap-qds-50 flex"></div>

// margin-top: var(--spacing-80);
<div className="mt-qds-80"></div>

// padding: var(--spacing-120);
<div className="p-qds-120"></div>

NOTE

The default Tailwind spacing scale remains unchanged. QDS values are prefixed with qds- to distinguish them from the default scale.

Tailwind Class
*-qds-0
CSS Variable
--spacing-0
Equivalent CSS
Tailwind Class
*-qds-10
CSS Variable
--spacing-10
Equivalent CSS
Tailwind Class
*-qds-20
CSS Variable
--spacing-20
Equivalent CSS
Tailwind Class
*-qds-30
CSS Variable
--spacing-30
Equivalent CSS
Tailwind Class
*-qds-40
CSS Variable
--spacing-40
Equivalent CSS
Tailwind Class
*-qds-50
CSS Variable
--spacing-50
Equivalent CSS
Tailwind Class
*-qds-60
CSS Variable
--spacing-60
Equivalent CSS
Tailwind Class
*-qds-70
CSS Variable
--spacing-70
Equivalent CSS
Tailwind Class
*-qds-80
CSS Variable
--spacing-80
Equivalent CSS
Tailwind Class
*-qds-90
CSS Variable
--spacing-90
Equivalent CSS
Tailwind Class
*-qds-100
CSS Variable
--spacing-100
Equivalent CSS
Tailwind Class
*-qds-110
CSS Variable
--spacing-110
Equivalent CSS
Tailwind Class
*-qds-120
CSS Variable
--spacing-120
Equivalent CSS
Tailwind Class
*-qds-130
CSS Variable
--spacing-130
Equivalent CSS
Tailwind Class
*-qds-140
CSS Variable
--spacing-140
Equivalent CSS
Tailwind Class
*-qds-150
CSS Variable
--spacing-150
Equivalent CSS
Tailwind Class
*-qds-160
CSS Variable
--spacing-160
Equivalent CSS
Tailwind Class
*-qds-170
CSS Variable
--spacing-170
Equivalent CSS
Tailwind Class
*-qds-180
CSS Variable
--spacing-180
Equivalent CSS
Tailwind Class
*-qds-190
CSS Variable
--spacing-190
Equivalent CSS
Tailwind Class
*-qds-200
CSS Variable
--spacing-200
Equivalent CSS
Tailwind Class
*-qds-210
CSS Variable
--spacing-210
Equivalent CSS
Tailwind Class
*-qds-220
CSS Variable
--spacing-220
Equivalent CSS
Tailwind Class
*-qds-230
CSS Variable
--spacing-230
Equivalent CSS
Tailwind Class
*-qds-240
CSS Variable
--spacing-240
Equivalent CSS
Tailwind Class
*-qds-250
CSS Variable
--spacing-250
Equivalent CSS
Tailwind Class
*-qds-260
CSS Variable
--spacing-260
Equivalent CSS
Tailwind Class
*-qds-270
CSS Variable
--spacing-270
Equivalent CSS
Tailwind Class
*-qds-280
CSS Variable
--spacing-280
Equivalent CSS
Tailwind Class
*-qds-290
CSS Variable
--spacing-290
Equivalent CSS
Tailwind Class
*-qds-300
CSS Variable
--spacing-300
Equivalent CSS
Tailwind Class
*-qds-310
CSS Variable
--spacing-310
Equivalent CSS
Tailwind Class
*-qds-320
CSS Variable
--spacing-320
Equivalent CSS
Tailwind Class
*-qds-330
CSS Variable
--spacing-330
Equivalent CSS