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