Space Between
Supports negative values. Learn more.
| Class | Properties |
|---|---|
| gl-space-x-0 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(0px * var(--tw-space-x-reverse))",
"margin-left": "calc(0px * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-1 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(0.125rem * var(--tw-space-x-reverse))",
"margin-left": "calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-2 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(0.25rem * var(--tw-space-x-reverse))",
"margin-left": "calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-3 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(0.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-4 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(0.75rem * var(--tw-space-x-reverse))",
"margin-left": "calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-5 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(1rem * var(--tw-space-x-reverse))",
"margin-left": "calc(1rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-6 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(1.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-7 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(2rem * var(--tw-space-x-reverse))",
"margin-left": "calc(2rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-8 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(2.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-9 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(3rem * var(--tw-space-x-reverse))",
"margin-left": "calc(3rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-10 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(3.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(3.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-11 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(4rem * var(--tw-space-x-reverse))",
"margin-left": "calc(4rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-12 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-13 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(6rem * var(--tw-space-x-reverse))",
"margin-left": "calc(6rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-15 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(7.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(7.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-20 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(10rem * var(--tw-space-x-reverse))",
"margin-left": "calc(10rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-26 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(13rem * var(--tw-space-x-reverse))",
"margin-left": "calc(13rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-28 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(14rem * var(--tw-space-x-reverse))",
"margin-left": "calc(14rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-30 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(15rem * var(--tw-space-x-reverse))",
"margin-left": "calc(15rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-31 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(15.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(15.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-34 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(17rem * var(--tw-space-x-reverse))",
"margin-left": "calc(17rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-48 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(24rem * var(--tw-space-x-reverse))",
"margin-left": "calc(24rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-62 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(31rem * var(--tw-space-x-reverse))",
"margin-left": "calc(31rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-75 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(37.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(37.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-80 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(40rem * var(--tw-space-x-reverse))",
"margin-left": "calc(40rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-88 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(44rem * var(--tw-space-x-reverse))",
"margin-left": "calc(44rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-px | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(1px * var(--tw-space-x-reverse))",
"margin-left": "calc(1px * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-x-11-5 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-x-reverse": "0",
"margin-right": "calc(4.5rem * var(--tw-space-x-reverse))",
"margin-left": "calc(4.5rem * calc(1 - var(--tw-space-x-reverse)))"
}; |
| gl-space-y-0 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(0px * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(0px * var(--tw-space-y-reverse))"
}; |
| gl-space-y-1 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(0.125rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(0.125rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-2 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(0.25rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(0.25rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-3 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(0.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-4 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(0.75rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(0.75rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-5 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(1rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(1rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-6 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(1.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(1.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-7 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(2rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(2rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-8 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(2.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(2.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-9 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(3rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(3rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-10 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(3.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(3.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-11 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(4rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(4rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-12 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-13 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(6rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(6rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-15 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(7.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(7.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-20 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(10rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(10rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-26 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(13rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(13rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-28 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(14rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(14rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-30 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(15rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(15rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-31 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(15.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(15.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-34 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(17rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(17rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-48 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(24rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(24rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-62 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(31rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(31rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-75 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(37.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(37.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-80 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(40rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(40rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-88 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(44rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(44rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-px | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(1px * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(1px * var(--tw-space-y-reverse))"
}; |
| gl-space-y-11-5 | & > :not([hidden]) ~ :not([hidden]): {
"--tw-space-y-reverse": "0",
"margin-top": "calc(4.5rem * calc(1 - var(--tw-space-y-reverse)))",
"margin-bottom": "calc(4.5rem * var(--tw-space-y-reverse))"
}; |
| gl-space-y-reverse > :not([hidden]) ~ :not([hidden]) | --tw-space-y-reverse: 1; |
| gl-space-x-reverse > :not([hidden]) ~ :not([hidden]) | --tw-space-x-reverse: 1; |