Get started with this free tool to view and search for all the class names and CSS properties from the world's most popular utility-first CSS framework. Inspired by Nerdcave's original cheat sheet.
Apply the max-width of an element to fix its width to the current breakpoint. [view docs]
| .container | none | width: 100% | copy | |
| sm: | max-width: 640px; | copy | ||
| md: | max-width: 768px; | copy | ||
| lg: | max-width: 1024px; | copy | ||
| xl: | max-width: 1280px; | copy | ||
| 2xl: | max-width: 1536px; | copy |
Set how an element's fragments should be rendered when broken across multiple lines, columns, or pages. [view docs]
| .decoration-slice | box-decoration-break: slice; | copy | |
| .decoration-clone | box-decoration-break: clone; | copy |
Define how the width and height of an element are calculated: should they include padding and borders, or not. [view docs]
| .box-border | box-sizing: border-box; | copy | |
| .box-content | box-sizing: content-box; | copy |
Use the breakpoints (screen sizes) to set how the utility-classes respond according to the device width. [view docs]
| sm: | @media (min-width: 640px) { ... } | copy | |
| md: | @media (min-width: 768px) { ... } | copy | |
| lg: | @media (min-width: 1024px) { ... } | copy | |
| xl: | @media (min-width: 1280px) { ... } | copy | |
| 2xl: | @media (min-width: 1536px) { ... } | copy |
Specify the display behavior (the type of rendering box) of an element. [view docs]
| .hidden | display: none; | copy | |
| .contents | display: contents; | copy | |
| .list-item | display: list-item; | copy | |
| .block | display: block; | copy | |
| .inline-block | display: inline-block; | copy | |
| .flex | display: flex; | copy | |
| .inline-flex | display: inline-flex; | copy | |
| .inline | display: inline; | copy | |
| .table | display: table; | copy | |
| .inline-table | display: inline-table; | copy | |
| .table-cell | display: table-cell; | copy | |
| .table-caption | display: table-caption; | copy | |
| .table-column | display: table-column; | copy | |
| .table-column-group | display: table-column-group; | copy | |
| .table-footer-group | display: table-footer-group; | copy | |
| .table-header-group | display: table-header-group; | copy | |
| .table-row-group | display: table-row-group; | copy | |
| .table-row | display: table-row; | copy | |
| .flow-root | display: flow-root | copy | |
| .grid | display: grid | copy | |
| .inline-grid | display: inline-grid | copy |
Place an element on the left or right side of its container, allowing text and inline elements to wrap around it. [view docs]
| .float-right | float: right; | copy | |
| .float-left | float: left; | copy | |
| .float-none | float: none; | copy |
Set whether an element must be moved below (cleared) floating elements that precede it. [view docs]
| .clear-left | clear: left; | copy | |
| .clear-right | clear: right; | copy | |
| .clear-both | clear: both; | copy | |
| .clear-none | clear: none; | copy |
Determine whether an element must create a new stacking context. [view docs]
| .isolate | isolation: isolate; | copy | |
| .isolate-auto | isolation: auto; | copy |
Set how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. [view docs]
| .object-contain | object-fit: contain; | copy | |
| .object-cover | object-fit: cover; | copy | |
| .object-fill | object-fit: fill; | copy | |
| .object-none | object-fit: none; | copy | |
| .object-scale-down | object-fit: scale-down; | copy |
Specify the alignment of the selected replaced element's contents within the element's box. [view docs]
| .object-bottom | object-position: bottom; | copy | |
| .object-center | object-position: center; | copy | |
| .object-left | object-position: left; | copy | |
| .object-left-bottom | object-position: left bottom; | copy | |
| .object-left-top | object-position: left top; | copy | |
| .object-right | object-position: right; | copy | |
| .object-right-bottom | object-position: right bottom; | copy | |
| .object-right-top | object-position: right top; | copy | |
| .object-top | object-position: top; | copy |
Set the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. [view docs]
| .overflow-auto | overflow: auto; | copy | |
| .overflow-x-auto | overflow-x: auto; | copy | |
| .overflow-y-auto | overflow-y: auto; | copy | |
| .overflow-hidden | overflow: hidden; | copy | |
| .overflow-x-hidden | overflow-x: hidden; | copy | |
| .overflow-y-hidden | overflow-y: hidden; | copy | |
| .overflow-visible | overflow: visible; | copy | |
| .overflow-x-visible | overflow-x: visible; | copy | |
| .overflow-y-visible | overflow-y: visible; | copy | |
| .overflow-scroll | overflow: scroll; | copy | |
| .overflow-x-scroll | overflow-x: scroll; | copy | |
| .overflow-y-scroll | overflow-y: scroll; | copy | |
| .scrolling-touch | -webkit-overflow-scrolling: touch; | copy | |
| .scrolling-auto | -webkit-overflow-scrolling: auto; | copy |
Set what a browser does when reaching the boundary of a scrolling area. [view docs]
| .overscroll-auto | overscroll-behavior: auto; | copy | |
| .overscroll-y-auto | overscroll-behavior-y: auto; | copy | |
| .overscroll-x-auto | overscroll-behavior-x: auto; | copy | |
| .overscroll-contain | overscroll-behavior: contain; | copy | |
| .overscroll-y-contain | overscroll-behavior-y: contain; | copy | |
| .overscroll-x-contain | overscroll-behavior-x: contain; | copy | |
| .overscroll-none | overscroll-behavior: none; | copy | |
| .overscroll-y-none | overscroll-behavior-y: none; | copy | |
| .overscroll-x-none | overscroll-behavior-x: none; | copy |
Set how an element is positioned in a document. [view docs]
| .static | position: static; | copy | |
| .fixed | position: fixed; | copy | |
| .absolute | position: absolute; | copy | |
| .relative | position: relative; | copy | |
| .sticky | position: sticky; | copy |
Determine the final location of positioned elements. [view docs]
| .inset-0 | top: 0; right: 0; bottom: 0; left: 0; | copy | |
| .-inset-0 | top: 0; right: 0; bottom: 0; left: 0; | copy | |
| .inset-y-0 | top: 0; bottom: 0; | copy | |
| .-inset-y-0 | top: 0; bottom: 0; | copy | |
| .inset-x-0 | right: 0; left: 0; | copy | |
| .-inset-x-0 | right: 0; left: 0; | copy | |
| .top-0 | top: 0; | copy | |
| .right-0 | right: 0; | copy | |
| .bottom-0 | bottom: 0; | copy | |
| .left-0 | left: 0; | copy | |
| .-top-0 | top: 0; | copy | |
| .-right-0 | right: 0; | copy | |
| .-bottom-0 | bottom: 0; | copy | |
| .-left-0 | left: 0; | copy | |
| .inset-0.5 | top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem; | copy | |
| .-inset-0.5 | top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; | copy | |
| .inset-y-0.5 | top: 0.125rem; bottom: 0.125rem; | copy | |
| .-inset-y-0.5 | top: -0.125rem; bottom: -0.125rem; | copy | |
| .inset-x-0.5 | right: 0.125rem; left: 0.125rem; | copy | |
| .-inset-x-0.5 | right: -0.125rem; left: -0.125rem; | copy | |
| .top-0.5 | top: 0.125rem; | copy | |
| .right-0.5 | right: 0.125rem; | copy | |
| .bottom-0.5 | bottom: 0.125rem; | copy | |
| .left-0.5 | left: 0.125rem; | copy | |
| .-top-0.5 | top: -0.125rem; | copy | |
| .-right-0.5 | right: -0.125rem; | copy | |
| .-bottom-0.5 | bottom: -0.125rem; | copy | |
| .-left-0.5 | left: -0.125rem; | copy | |
| .inset-1 | top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem; | copy | |
| .-inset-1 | top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem; | copy | |
| .inset-y-1 | top: 0.25rem; bottom: 0.25rem; | copy | |
| .-inset-y-1 | top: -0.25rem; bottom: -0.25rem; | copy | |
| .inset-x-1 | right: 0.25rem; left: 0.25rem; | copy | |
| .-inset-x-1 | right: -0.25rem; left: -0.25rem; | copy | |
| .top-1 | top: 0.25rem; | copy | |
| .right-1 | right: 0.25rem; | copy | |
| .bottom-1 | bottom: 0.25rem; | copy | |
| .left-1 | left: 0.25rem; | copy | |
| .-top-1 | top: -0.25rem; | copy | |
| .-right-1 | right: -0.25rem; | copy | |
| .-bottom-1 | bottom: -0.25rem; | copy | |
| .-left-1 | left: -0.25rem; | copy | |
| .inset-1.5 | top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem; | copy | |
| .-inset-1.5 | top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem; | copy | |
| .inset-y-1.5 | top: 0.375rem; bottom: 0.375rem; | copy | |
| .-inset-y-1.5 | top: -0.375rem; bottom: -0.375rem; | copy | |
| .inset-x-1.5 | right: 0.375rem; left: 0.375rem; | copy | |
| .-inset-x-1.5 | right: -0.375rem; left: -0.375rem; | copy | |
| .top-1.5 | top: 0.375rem; | copy | |
| .right-1.5 | right: 0.375rem; | copy | |
| .bottom-1.5 | bottom: 0.375rem; | copy | |
| .left-1.5 | left: 0.375rem; | copy | |
| .-top-1.5 | top: -0.375rem; | copy | |
| .-right-1.5 | right: -0.375rem; | copy | |
| .-bottom-1.5 | bottom: -0.375rem; | copy | |
| .-left-1.5 | left: -0.375rem; | copy | |
| .inset-2 | top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; | copy | |
| .-inset-2 | top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem; | copy | |
| .inset-y-2 | top: 0.5rem; bottom: 0.5rem; | copy | |
| .-inset-y-2 | top: -0.5rem; bottom: -0.5rem; | copy | |
| .inset-x-2 | right: 0.5rem; left: 0.5rem; | copy | |
| .-inset-x-2 | right: -0.5rem; left: -0.5rem; | copy | |
| .top-2 | top: 0.5rem; | copy | |
| .right-2 | right: 0.5rem; | copy | |
| .bottom-2 | bottom: 0.5rem; | copy | |
| .left-2 | left: 0.5rem; | copy | |
| .-top-2 | top: -0.5rem; | copy | |
| .-right-2 | right: -0.5rem; | copy | |
| .-bottom-2 | bottom: -0.5rem; | copy | |
| .-left-2 | left: -0.5rem; | copy | |
| .inset-2.5 | top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem; | copy | |
| .-inset-2.5 | top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem; | copy | |
| .inset-y-2.5 | top: 0.625rem; bottom: 0.625rem; | copy | |
| .-inset-y-2.5 | top: -0.625rem; bottom: -0.625rem; | copy | |
| .inset-x-2.5 | right: 0.625rem; left: 0.625rem; | copy | |
| .-inset-x-2.5 | right: -0.625rem; left: -0.625rem; | copy | |
| .top-2.5 | top: 0.625rem; | copy | |
| .right-2.5 | right: 0.625rem; | copy | |
| .bottom-2.5 | bottom: 0.625rem; | copy | |
| .left-2.5 | left: 0.625rem; | copy | |
| .-top-2.5 | top: -0.625rem; | copy | |
| .-right-2.5 | right: -0.625rem; | copy | |
| .-bottom-2.5 | bottom: -0.625rem; | copy | |
| .-left-2.5 | left: -0.625rem; | copy | |
| .inset-3 | top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; | copy | |
| .-inset-3 | top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem; | copy | |
| .inset-y-3 | top: 0.75rem; bottom: 0.75rem; | copy | |
| .-inset-y-3 | top: -0.75rem; bottom: -0.75rem; | copy | |
| .inset-x-3 | right: 0.75rem; left: 0.75rem; | copy | |
| .-inset-x-3 | right: -0.75rem; left: -0.75rem; | copy | |
| .top-3 | top: 0.75rem; | copy | |
| .right-3 | right: 0.75rem; | copy | |
| .bottom-3 | bottom: 0.75rem; | copy | |
| .left-3 | left: 0.75rem; | copy | |
| .-top-3 | top: -0.75rem; | copy | |
| .-right-3 | right: -0.75rem; | copy | |
| .-bottom-3 | bottom: -0.75rem; | copy | |
| .-left-3 | left: -0.75rem; | copy | |
| .inset-3.5 | top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem; | copy | |
| .-inset-3.5 | top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem; | copy | |
| .inset-y-3.5 | top: 0.875rem; bottom: 0.875rem; | copy | |
| .-inset-y-3.5 | top: -0.875rem; bottom: -0.875rem; | copy | |
| .inset-x-3.5 | right: 0.875rem; left: 0.875rem; | copy | |
| .-inset-x-3.5 | right: -0.875rem; left: -0.875rem; | copy | |
| .top-3.5 | top: 0.875rem; | copy | |
| .right-3.5 | right: 0.875rem; | copy | |
| .bottom-3.5 | bottom: 0.875rem; | copy | |
| .left-3.5 | left: 0.875rem; | copy | |
| .-top-3.5 | top: -0.875rem; | copy | |
| .-right-3.5 | right: -0.875rem; | copy | |
| .-bottom-3.5 | bottom: -0.875rem; | copy | |
| .-left-3.5 | left: -0.875rem; | copy | |
| .inset-4 | top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; | copy | |
| .-inset-4 | top: -1rem; right: -1rem; bottom: -1rem; left: -1rem; | copy | |
| .inset-y-4 | top: 1rem; bottom: 1rem; | copy | |
| .-inset-y-4 | top: -1rem; bottom: -1rem; | copy | |
| .inset-x-4 | right: 1rem; left: 1rem; | copy | |
| .-inset-x-4 | right: -1rem; left: -1rem; | copy | |
| .top-4 | top: 1rem; | copy | |
| .right-4 | right: 1rem; | copy | |
| .bottom-4 | bottom: 1rem; | copy | |
| .left-4 | left: 1rem; | copy | |
| .-top-4 | top: -1rem; | copy | |
| .-right-4 | right: -1rem; | copy | |
| .-bottom-4 | bottom: -1rem; | copy | |
| .-left-4 | left: -1rem; | copy | |
| .inset-5 | top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; | copy | |
| .-inset-5 | top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem; | copy | |
| .inset-y-5 | top: 1.25rem; bottom: 1.25rem; | copy | |
| .-inset-y-5 | top: -1.25rem; bottom: -1.25rem; | copy | |
| .inset-x-5 | right: 1.25rem; left: 1.25rem; | copy | |
| .-inset-x-5 | right: -1.25rem; left: -1.25rem; | copy | |
| .top-5 | top: 1.25rem; | copy | |
| .right-5 | right: 1.25rem; | copy | |
| .bottom-5 | bottom: 1.25rem; | copy | |
| .left-5 | left: 1.25rem; | copy | |
| .-top-5 | top: -1.25rem; | copy | |
| .-right-5 | right: -1.25rem; | copy | |
| .-bottom-5 | bottom: -1.25rem; | copy | |
| .-left-5 | left: -1.25rem; | copy | |
| .inset-6 | top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; | copy | |
| .-inset-6 | top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem; | copy | |
| .inset-y-6 | top: 1.5rem; bottom: 1.5rem; | copy | |
| .-inset-y-6 | top: -1.5rem; bottom: -1.5rem; | copy | |
| .inset-x-6 | right: 1.5rem; left: 1.5rem; | copy | |
| .-inset-x-6 | right: -1.5rem; left: -1.5rem; | copy | |
| .top-6 | top: 1.5rem; | copy | |
| .right-6 | right: 1.5rem; | copy | |
| .bottom-6 | bottom: 1.5rem; | copy | |
| .left-6 | left: 1.5rem; | copy | |
| .-top-6 | top: -1.5rem; | copy | |
| .-right-6 | right: -1.5rem; | copy | |
| .-bottom-6 | bottom: -1.5rem; | copy | |
| .-left-6 | left: -1.5rem; | copy | |
| .inset-7 | top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem; | copy | |
| .-inset-7 | top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem; | copy | |
| .inset-y-7 | top: 1.75rem; bottom: 1.75rem; | copy | |
| .-inset-y-7 | top: -1.75rem; bottom: -1.75rem; | copy | |
| .inset-x-7 | right: 1.75rem; left: 1.75rem; | copy | |
| .-inset-x-7 | right: -1.75rem; left: -1.75rem; | copy | |
| .top-7 | top: 1.75rem; | copy | |
| .right-7 | right: 1.75rem; | copy | |
| .bottom-7 | bottom: 1.75rem; | copy | |
| .left-7 | left: 1.75rem; | copy | |
| .-top-7 | top: -1.75rem; | copy | |
| .-right-7 | right: -1.75rem; | copy | |
| .-bottom-7 | bottom: -1.75rem; | copy | |
| .-left-7 | left: -1.75rem; | copy | |
| .inset-8 | top: 2rem; right: 2rem; bottom: 2rem; left: 2rem; | copy | |
| .-inset-8 | top: -2rem; right: -2rem; bottom: -2rem; left: -2rem; | copy | |
| .inset-y-8 | top: 2rem; bottom: 2rem; | copy | |
| .-inset-y-8 | top: -2rem; bottom: -2rem; | copy | |
| .inset-x-8 | right: 2rem; left: 2rem; | copy | |
| .-inset-x-8 | right: -2rem; left: -2rem; | copy | |
| .top-8 | top: 2rem; | copy | |
| .right-8 | right: 2rem; | copy | |
| .bottom-8 | bottom: 2rem; | copy | |
| .left-8 | left: 2rem; | copy | |
| .-top-8 | top: -2rem; | copy | |
| .-right-8 | right: -2rem; | copy | |
| .-bottom-8 | bottom: -2rem; | copy | |
| .-left-8 | left: -2rem; | copy | |
| .inset-9 | top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem; | copy | |
| .-inset-9 | top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem; | copy | |
| .inset-y-9 | top: 2.25rem; bottom: 2.25rem; | copy | |
| .-inset-y-9 | top: -2.25rem; bottom: -2.25rem; | copy | |
| .inset-x-9 | right: 2.25rem; left: 2.25rem; | copy | |
| .-inset-x-9 | right: -2.25rem; left: -2.25rem; | copy | |
| .top-9 | top: 2.25rem; | copy | |
| .right-9 | right: 2.25rem; | copy | |
| .bottom-9 | bottom: 2.25rem; | copy | |
| .left-9 | left: 2.25rem; | copy | |
| .-top-9 | top: -2.25rem; | copy | |
| .-right-9 | right: -2.25rem; | copy | |
| .-bottom-9 | bottom: -2.25rem; | copy | |
| .-left-9 | left: -2.25rem; | copy | |
| .inset-10 | top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem; | copy | |
| .-inset-10 | top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem; | copy | |
| .inset-y-10 | top: 2.5rem; bottom: 2.5rem; | copy | |
| .-inset-y-10 | top: -2.5rem; bottom: -2.5rem; | copy | |
| .inset-x-10 | right: 2.5rem; left: 2.5rem; | copy | |
| .-inset-x-10 | right: -2.5rem; left: -2.5rem; | copy | |
| .top-10 | top: 2.5rem; | copy | |
| .right-10 | right: 2.5rem; | copy | |
| .bottom-10 | bottom: 2.5rem; | copy | |
| .left-10 | left: 2.5rem; | copy | |
| .-top-10 | top: -2.5rem; | copy | |
| .-right-10 | right: -2.5rem; | copy | |
| .-bottom-10 | bottom: -2.5rem; | copy | |
| .-left-10 | left: -2.5rem; | copy | |
| .inset-11 | top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem; | copy | |
| .-inset-11 | top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem; | copy | |
| .inset-y-11 | top: 2.75rem; bottom: 2.75rem; | copy | |
| .-inset-y-11 | top: -2.75rem; bottom: -2.75rem; | copy | |
| .inset-x-11 | right: 2.75rem; left: 2.75rem; | copy | |
| .-inset-x-11 | right: -2.75rem; left: -2.75rem; | copy | |
| .top-11 | top: 2.75rem; | copy | |
| .right-11 | right: 2.75rem; | copy | |
| .bottom-11 | bottom: 2.75rem; | copy | |
| .left-11 | left: 2.75rem; | copy | |
| .-top-11 | top: -2.75rem; | copy | |
| .-right-11 | right: -2.75rem; | copy | |
| .-bottom-11 | bottom: -2.75rem; | copy | |
| .-left-11 | left: -2.75rem; | copy | |
| .inset-12 | top: 3rem; right: 3rem; bottom: 3rem; left: 3rem; | copy | |
| .-inset-12 | top: -3rem; right: -3rem; bottom: -3rem; left: -3rem; | copy | |
| .inset-y-12 | top: 3rem; bottom: 3rem; | copy | |
| .-inset-y-12 | top: -3rem; bottom: -3rem; | copy | |
| .inset-x-12 | right: 3rem; left: 3rem; | copy | |
| .-inset-x-12 | right: -3rem; left: -3rem; | copy | |
| .top-12 | top: 3rem; | copy | |
| .right-12 | right: 3rem; | copy | |
| .bottom-12 | bottom: 3rem; | copy | |
| .left-12 | left: 3rem; | copy | |
| .-top-12 | top: -3rem; | copy | |
| .-right-12 | right: -3rem; | copy | |
| .-bottom-12 | bottom: -3rem; | copy | |
| .-left-12 | left: -3rem; | copy | |
| .inset-14 | top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem; | copy | |
| .-inset-14 | top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem; | copy | |
| .inset-y-14 | top: 3.5rem; bottom: 3.5rem; | copy | |
| .-inset-y-14 | top: -3.5rem; bottom: -3.5rem; | copy | |
| .inset-x-14 | right: 3.5rem; left: 3.5rem; | copy | |
| .-inset-x-14 | right: -3.5rem; left: -3.5rem; | copy | |
| .top-14 | top: 3.5rem; | copy | |
| .right-14 | right: 3.5rem; | copy | |
| .bottom-14 | bottom: 3.5rem; | copy | |
| .left-14 | left: 3.5rem; | copy | |
| .-top-14 | top: -3.5rem; | copy | |
| .-right-14 | right: -3.5rem; | copy | |
| .-bottom-14 | bottom: -3.5rem; | copy | |
| .-left-14 | left: -3.5rem; | copy | |
| .inset-16 | top: 4rem; right: 4rem; bottom: 4rem; left: 4rem; | copy | |
| .-inset-16 | top: -4rem; right: -4rem; bottom: -4rem; left: -4rem; | copy | |
| .inset-y-16 | top: 4rem; bottom: 4rem; | copy | |
| .-inset-y-16 | top: -4rem; bottom: -4rem; | copy | |
| .inset-x-16 | right: 4rem; left: 4rem; | copy | |
| .-inset-x-16 | right: -4rem; left: -4rem; | copy | |
| .top-16 | top: 4rem; | copy | |
| .right-16 | right: 4rem; | copy | |
| .bottom-16 | bottom: 4rem; | copy | |
| .left-16 | left: 4rem; | copy | |
| .-top-16 | top: -4rem; | copy | |
| .-right-16 | right: -4rem; | copy | |
| .-bottom-16 | bottom: -4rem; | copy | |
| .-left-16 | left: -4rem; | copy | |
| .inset-20 | top: 5rem; right: 5rem; bottom: 5rem; left: 5rem; | copy | |
| .-inset-20 | top: -5rem; right: -5rem; bottom: -5rem; left: -5rem; | copy | |
| .inset-y-20 | top: 5rem; bottom: 5rem; | copy | |
| .-inset-y-20 | top: -5rem; bottom: -5rem; | copy | |
| .inset-x-20 | right: 5rem; left: 5rem; | copy | |
| .-inset-x-20 | right: -5rem; left: -5rem; | copy | |
| .top-20 | top: 5rem; | copy | |
| .right-20 | right: 5rem; | copy | |
| .bottom-20 | bottom: 5rem; | copy | |
| .left-20 | left: 5rem; | copy | |
| .-top-20 | top: -5rem; | copy | |
| .-right-20 | right: -5rem; | copy | |
| .-bottom-20 | bottom: -5rem; | copy | |
| .-left-20 | left: -5rem; | copy | |
| .inset-24 | top: 6rem; right: 6rem; bottom: 6rem; left: 6rem; | copy | |
| .-inset-24 | top: -6rem; right: -6rem; bottom: -6rem; left: -6rem; | copy | |
| .inset-y-24 | top: 6rem; bottom: 6rem; | copy | |
| .-inset-y-24 | top: -6rem; bottom: -6rem; | copy | |
| .inset-x-24 | right: 6rem; left: 6rem; | copy | |
| .-inset-x-24 | right: -6rem; left: -6rem; | copy | |
| .top-24 | top: 6rem; | copy | |
| .right-24 | right: 6rem; | copy | |
| .bottom-24 | bottom: 6rem; | copy | |
| .left-24 | left: 6rem; | copy | |
| .-top-24 | top: -6rem; | copy | |
| .-right-24 | right: -6rem; | copy | |
| .-bottom-24 | bottom: -6rem; | copy | |
| .-left-24 | left: -6rem; | copy | |
| .inset-28 | top: 7rem; right: 7rem; bottom: 7rem; left: 7rem; | copy | |
| .-inset-28 | top: -7rem; right: -7rem; bottom: -7rem; left: -7rem; | copy | |
| .inset-y-28 | top: 7rem; bottom: 7rem; | copy | |
| .-inset-y-28 | top: -7rem; bottom: -7rem; | copy | |
| .inset-x-28 | right: 7rem; left: 7rem; | copy | |
| .-inset-x-28 | right: -7rem; left: -7rem; | copy | |
| .top-28 | top: 7rem; | copy | |
| .right-28 | right: 7rem; | copy | |
| .bottom-28 | bottom: 7rem; | copy | |
| .left-28 | left: 7rem; | copy | |
| .-top-28 | top: -7rem; | copy | |
| .-right-28 | right: -7rem; | copy | |
| .-bottom-28 | bottom: -7rem; | copy | |
| .-left-28 | left: -7rem; | copy | |
| .inset-32 | top: 8rem; right: 8rem; bottom: 8rem; left: 8rem; | copy | |
| .-inset-32 | top: -8rem; right: -8rem; bottom: -8rem; left: -8rem; | copy | |
| .inset-y-32 | top: 8rem; bottom: 8rem; | copy | |
| .-inset-y-32 | top: -8rem; bottom: -8rem; | copy | |
| .inset-x-32 | right: 8rem; left: 8rem; | copy | |
| .-inset-x-32 | right: -8rem; left: -8rem; | copy | |
| .top-32 | top: 8rem; | copy | |
| .right-32 | right: 8rem; | copy | |
| .bottom-32 | bottom: 8rem; | copy | |
| .left-32 | left: 8rem; | copy | |
| .-top-32 | top: -8rem; | copy | |
| .-right-32 | right: -8rem; | copy | |
| .-bottom-32 | bottom: -8rem; | copy | |
| .-left-32 | left: -8rem; | copy | |
| .inset-36 | top: 9rem; right: 9rem; bottom: 9rem; left: 9rem; | copy | |
| .-inset-36 | top: -9rem; right: -9rem; bottom: -9rem; left: -9rem; | copy | |
| .inset-y-36 | top: 9rem; bottom: 9rem; | copy | |
| .-inset-y-36 | top: -9rem; bottom: -9rem; | copy | |
| .inset-x-36 | right: 9rem; left: 9rem; | copy | |
| .-inset-x-36 | right: -9rem; left: -9rem; | copy | |
| .top-36 | top: 9rem; | copy | |
| .right-36 | right: 9rem; | copy | |
| .bottom-36 | bottom: 9rem; | copy | |
| .left-36 | left: 9rem; | copy | |
| .-top-36 | top: -9rem; | copy | |
| .-right-36 | right: -9rem; | copy | |
| .-bottom-36 | bottom: -9rem; | copy | |
| .-left-36 | left: -9rem; | copy | |
| .inset-40 | top: 10rem; right: 10rem; bottom: 10rem; left: 10rem; | copy | |
| .-inset-40 | top: -10rem; right: -10rem; bottom: -10rem; left: -10rem; | copy | |
| .inset-y-40 | top: 10rem; bottom: 10rem; | copy | |
| .-inset-y-40 | top: -10rem; bottom: -10rem; | copy | |
| .inset-x-40 | right: 10rem; left: 10rem; | copy | |
| .-inset-x-40 | right: -10rem; left: -10rem; | copy | |
| .top-40 | top: 10rem; | copy | |
| .right-40 | right: 10rem; | copy | |
| .bottom-40 | bottom: 10rem; | copy | |
| .left-40 | left: 10rem; | copy | |
| .-top-40 | top: -10rem; | copy | |
| .-right-40 | right: -10rem; | copy | |
| .-bottom-40 | bottom: -10rem; | copy | |
| .-left-40 | left: -10rem; | copy | |
| .inset-44 | top: 11rem; right: 11rem; bottom: 11rem; left: 11rem; | copy | |
| .-inset-44 | top: -11rem; right: -11rem; bottom: -11rem; left: -11rem; | copy | |
| .inset-y-44 | top: 11rem; bottom: 11rem; | copy | |
| .-inset-y-44 | top: -11rem; bottom: -11rem; | copy | |
| .inset-x-44 | right: 11rem; left: 11rem; | copy | |
| .-inset-x-44 | right: -11rem; left: -11rem; | copy | |
| .top-44 | top: 11rem; | copy | |
| .right-44 | right: 11rem; | copy | |
| .bottom-44 | bottom: 11rem; | copy | |
| .left-44 | left: 11rem; | copy | |
| .-top-44 | top: -11rem; | copy | |
| .-right-44 | right: -11rem; | copy | |
| .-bottom-44 | bottom: -11rem; | copy | |
| .-left-44 | left: -11rem; | copy | |
| .inset-48 | top: 12rem; right: 12rem; bottom: 12rem; left: 12rem; | copy | |
| .-inset-48 | top: -12rem; right: -12rem; bottom: -12rem; left: -12rem; | copy | |
| .inset-y-48 | top: 12rem; bottom: 12rem; | copy | |
| .-inset-y-48 | top: -12rem; bottom: -12rem; | copy | |
| .inset-x-48 | right: 12rem; left: 12rem; | copy | |
| .-inset-x-48 | right: -12rem; left: -12rem; | copy | |
| .top-48 | top: 12rem; | copy | |
| .right-48 | right: 12rem; | copy | |
| .bottom-48 | bottom: 12rem; | copy | |
| .left-48 | left: 12rem; | copy | |
| .-top-48 | top: -12rem; | copy | |
| .-right-48 | right: -12rem; | copy | |
| .-bottom-48 | bottom: -12rem; | copy | |
| .-left-48 | left: -12rem; | copy | |
| .inset-52 | top: 13rem; right: 13rem; bottom: 13rem; left: 13rem; | copy | |
| .-inset-52 | top: -13rem; right: -13rem; bottom: -13rem; left: -13rem; | copy | |
| .inset-y-52 | top: 13rem; bottom: 13rem; | copy | |
| .-inset-y-52 | top: -13rem; bottom: -13rem; | copy | |
| .inset-x-52 | right: 13rem; left: 13rem; | copy | |
| .-inset-x-52 | right: -13rem; left: -13rem; | copy | |
| .top-52 | top: 13rem; | copy | |
| .right-52 | right: 13rem; | copy | |
| .bottom-52 | bottom: 13rem; | copy | |
| .left-52 | left: 13rem; | copy | |
| .-top-52 | top: -13rem; | copy | |
| .-right-52 | right: -13rem; | copy | |
| .-bottom-52 | bottom: -13rem; | copy | |
| .-left-52 | left: -13rem; | copy | |
| .inset-56 | top: 14rem; right: 14rem; bottom: 14rem; left: 14rem; | copy | |
| .-inset-56 | top: -14rem; right: -14rem; bottom: -14rem; left: -14rem; | copy | |
| .inset-y-56 | top: 14rem; bottom: 14rem; | copy | |
| .-inset-y-56 | top: -14rem; bottom: -14rem; | copy | |
| .inset-x-56 | right: 14rem; left: 14rem; | copy | |
| .-inset-x-56 | right: -14rem; left: -14rem; | copy | |
| .top-56 | top: 14rem; | copy | |
| .right-56 | right: 14rem; | copy | |
| .bottom-56 | bottom: 14rem; | copy | |
| .left-56 | left: 14rem; | copy | |
| .-top-56 | top: -14rem; | copy | |
| .-right-56 | right: -14rem; | copy | |
| .-bottom-56 | bottom: -14rem; | copy | |
| .-left-56 | left: -14rem; | copy | |
| .inset-60 | top: 15rem; right: 15rem; bottom: 15rem; left: 15rem; | copy | |
| .-inset-60 | top: -15rem; right: -15rem; bottom: -15rem; left: -15rem; | copy | |
| .inset-y-60 | top: 15rem; bottom: 15rem; | copy | |
| .-inset-y-60 | top: -15rem; bottom: -15rem; | copy | |
| .inset-x-60 | right: 15rem; left: 15rem; | copy | |
| .-inset-x-60 | right: -15rem; left: -15rem; | copy | |
| .top-60 | top: 15rem; | copy | |
| .right-60 | right: 15rem; | copy | |
| .bottom-60 | bottom: 15rem; | copy | |
| .left-60 | left: 15rem; | copy | |
| .-top-60 | top: -15rem; | copy | |
| .-right-60 | right: -15rem; | copy | |
| .-bottom-60 | bottom: -15rem; | copy | |
| .-left-60 | left: -15rem; | copy | |
| .inset-64 | top: 16rem; right: 16rem; bottom: 16rem; left: 16rem; | copy | |
| .-inset-64 | top: -16rem; right: -16rem; bottom: -16rem; left: -16rem; | copy | |
| .inset-y-64 | top: 16rem; bottom: 16rem; | copy | |
| .-inset-y-64 | top: -16rem; bottom: -16rem; | copy | |
| .inset-x-64 | right: 16rem; left: 16rem; | copy | |
| .-inset-x-64 | right: -16rem; left: -16rem; | copy | |
| .top-64 | top: 16rem; | copy | |
| .right-64 | right: 16rem; | copy | |
| .bottom-64 | bottom: 16rem; | copy | |
| .left-64 | left: 16rem; | copy | |
| .-top-64 | top: -16rem; | copy | |
| .-right-64 | right: -16rem; | copy | |
| .-bottom-64 | bottom: -16rem; | copy | |
| .-left-64 | left: -16rem; | copy | |
| .inset-72 | top: 18rem; right: 18rem; bottom: 18rem; left: 18rem; | copy | |
| .-inset-72 | top: -18rem; right: -18rem; bottom: -18rem; left: -18rem; | copy | |
| .inset-y-72 | top: 18rem; bottom: 18rem; | copy | |
| .-inset-y-72 | top: -18rem; bottom: -18rem; | copy | |
| .inset-x-72 | right: 18rem; left: 18rem; | copy | |
| .-inset-x-72 | right: -18rem; left: -18rem; | copy | |
| .top-72 | top: 18rem; | copy | |
| .right-72 | right: 18rem; | copy | |
| .bottom-72 | bottom: 18rem; | copy | |
| .left-72 | left: 18rem; | copy | |
| .-top-72 | top: -18rem; | copy | |
| .-right-72 | right: -18rem; | copy | |
| .-bottom-72 | bottom: -18rem; | copy | |
| .-left-72 | left: -18rem; | copy | |
| .inset-80 | top: 20; right: 20; bottom: 20; left: 20; | copy | |
| .-inset-80 | top: -20; right: -20; bottom: -20; left: -20; | copy | |
| .inset-y-80 | top: 20; bottom: 20; | copy | |
| .-inset-y-80 | top: -20; bottom: -20; | copy | |
| .inset-x-80 | right: 20; left: 20; | copy | |
| .-inset-x-80 | right: -20; left: -20; | copy | |
| .top-80 | top: 20; | copy | |
| .right-80 | right: 20; | copy | |
| .bottom-80 | bottom: 20; | copy | |
| .left-80 | left: 20; | copy | |
| .-top-80 | top: -20; | copy | |
| .-right-80 | right: -20; | copy | |
| .-bottom-80 | bottom: -20; | copy | |
| .-left-80 | left: -20rem; | copy | |
| .inset-96 | top: 24rem; right: 24rem; bottom: 24rem; left: 24rem; | copy | |
| .-inset-96 | top: -24rem; right: -24rem; bottom: -24rem; left: -24rem; | copy | |
| .inset-y-96 | top: 24rem; bottom: 24rem; | copy | |
| .-inset-y-96 | top: -24rem; bottom: -24rem; | copy | |
| .inset-x-96 | right: 24rem; left: 24rem; | copy | |
| .-inset-x-96 | right: -24rem; left: -24rem; | copy | |
| .top-96 | top: 24rem; | copy | |
| .right-96 | right: 24rem; | copy | |
| .bottom-96 | bottom: 24rem; | copy | |
| .left-96 | left: 24rem; | copy | |
| .-top-96 | top: -24rem; | copy | |
| .-right-96 | right: -24rem; | copy | |
| .-bottom-96 | bottom: -24rem; | copy | |
| .-left-96 | left: -24rem; | copy | |
| .inset-auto | top: auto; right: auto; bottom: auto; left: auto; | copy | |
| .inset-y-auto | top: auto; bottom: auto; | copy | |
| .inset-x-auto | right: auto; left: auto; | copy | |
| .top-auto | top: auto; | copy | |
| .right-auto | right: auto; | copy | |
| .bottom-auto | bottom: auto; | copy | |
| .left-auto | left: auto; | copy | |
| .inset-1/2 | top: 50%; right: 50%; bottom: 50%; left: 50%; | copy | |
| .inset-2/3 | top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%; | copy | |
| .inset-1/4 | top: 25%; right: 25%; bottom: 25%; left: 25%; | copy | |
| .inset-3/4 | top: 75%; right: 75%; bottom: 75%; left: 75%; | copy | |
| .inset-full | top: 100%; right: 100%; bottom: 100%; left: 100%; | copy | |
| .-inset-1/2 | top: -50%; right: -50%; bottom: -50%; left: -50%; | copy | |
| .-inset-2/3 | top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%; | copy | |
| .-inset-1/4 | top: -25%; right: -25%; bottom: -25%; left: -25%; | copy | |
| .-inset-3/4 | top: -75%; right: -75%; bottom: -75%; left: -75%; | copy | |
| .-inset-full | top: -100%; right: -100%; bottom: -100%; left: -100%; | copy | |
| .inset-x-1/2 | right: 50%; left: 50%; | copy | |
| .inset-x-2/3 | right: 66.666667%; left: 66.666667%; | copy | |
| .inset-x-1/4 | right: 25%; left: 25%; | copy | |
| .inset-x-3/4 | right: 75%; left: 75%; | copy | |
| .inset-x-full | right: 100%; left: 100%; | copy | |
| .-inset-x-1/2 | right: -50%; left: -50%; | copy | |
| .-inset-x-2/3 | right: -66.666667%; left: -66.666667%; | copy | |
| .-inset-x-1/4 | right: -25%; left: -25%; | copy | |
| .-inset-x-3/4 | right: -75%; left: -75%; | copy | |
| .-inset-x-full | right: -100%; left: -100%; | copy | |
| .inset-y-1/2 | top: 50%; bottom: 50%; | copy | |
| .inset-y-2/3 | top: 66.666667%; bottom: 66.666667%; | copy | |
| .inset-y-1/4 | top: 25%; bottom: 25%; | copy | |
| .inset-y-3/4 | top: 75%; bottom: 75%; | copy | |
| .inset-y-full | top: 100%; bottom: 100%; | copy | |
| .-inset-y-1/2 | top: -50%; bottom: -50%; | copy | |
| .-inset-y-2/3 | top: -66.666667%; bottom: -66.666667%; | copy | |
| .-inset-y-1/4 | top: -25%; bottom: -25%; | copy | |
| .-inset-y-3/4 | top: -75%; bottom: -75%; | copy | |
| .-inset-y-full | top: -100%; bottom: -100%; | copy | |
| .top-1/2 | top: 50%; | copy | |
| .top-2/3 | top: 66.666667%; | copy | |
| .top-1/4 | top: 25%; | copy | |
| .top-3/4 | top: 75%; | copy | |
| .top-full | top: 100%; | copy | |
| .-top-1/2 | top: -50%; | copy | |
| .-top-2/3 | top: -66.666667%; | copy | |
| .-top-1/4 | top: -25%; | copy | |
| .-top-3/4 | top: -75%; | copy | |
| .-top-full | top: -100%; | copy | |
| .right-1/2 | right: 50%; | copy | |
| .right-2/3 | right: 66.666667%; | copy | |
| .right-1/4 | right: 25%; | copy | |
| .right-3/4 | right: 75%; | copy | |
| .right-full | right: 100%; | copy | |
| .-right-1/2 | right: -50%; | copy | |
| .-right-2/3 | right: -66.666667%; | copy | |
| .-right-1/4 | right: -25%; | copy | |
| .-right-3/4 | right: -75%; | copy | |
| .-right-full | right: -100%; | copy | |
| .bottom-1/2 | bottom: 50%; | copy | |
| .bottom-2/3 | bottom: 66.666667%; | copy | |
| .bottom-1/4 | bottom: 25%; | copy | |
| .bottom-3/4 | bottom: 75%; | copy | |
| .bottom-full | bottom: 100%; | copy | |
| .-bottom-1/2 | bottom: -50%; | copy | |
| .-bottom-2/3 | bottom: -66.666667%; | copy | |
| .-bottom-1/4 | bottom: -25%; | copy | |
| .-bottom-3/4 | bottom: -75%; | copy | |
| .-bottom-full | bottom: -100%; | copy | |
| .left-1/2 | left: 50%; | copy | |
| .left-2/3 | left: 66.666667%; | copy | |
| .left-1/4 | left: 25%; | copy | |
| .left-3/4 | left: 75%; | copy | |
| .left-full | left: 100%; | copy | |
| .-left-1/2 | left: -50%; | copy | |
| .-left-2/3 | left: -66.666667%; | copy | |
| .-left-1/4 | left: -25%; | copy | |
| .-left-3/4 | left: -75%; | copy | |
| .-left-full | left: -100%; | copy |
Show or hide an element without changing the layout of a document. [view docs]
| .visible | visibility: visible; | copy | |
| .invisible | visibility: hidden; | copy |
Set the z-order of a positioned element and its descendants or flex items. [view docs]
| .z-0 | z-index: 0; | copy | |
| .z-10 | z-index: 10; | copy | |
| .z-20 | z-index: 20; | copy | |
| .z-30 | z-index: 30; | copy | |
| .z-40 | z-index: 40; | copy | |
| .z-50 | z-index: 50; | copy | |
| .z-auto | z-index: auto; | copy |
Set the padding area of an element on all sides, vertically, horizontally, or just on one side. [view docs]
| .p-0 | padding: 0; | copy | |
| .p-0.5 | padding: 0.125rem; | 2px | copy |
| .p-1 | padding: 0.25rem; | 4px | copy |
| .p-1.5 | padding: 0.375rem; | 6px | copy |
| .p-2 | padding: 0.5rem; | 8px | copy |
| .p-2.5 | padding: 0.625rem; | 10px | copy |
| .p-3 | padding: 0.75rem; | 12px | copy |
| .p-3.5 | padding: 0.875rem; | 14px | copy |
| .p-4 | padding: 1rem; | 16px | copy |
| .p-5 | padding: 1.25rem; | 20px | copy |
| .p-6 | padding: 1.5rem; | 24px | copy |
| .p-8 | padding: 2rem; | 32px | copy |
| .p-10 | padding: 2.5rem; | 40px | copy |
| .p-11 | padding: 2.75rem; | 44px | copy |
| .p-12 | padding: 3rem; | 48px | copy |
| .p-14 | padding: 3.5rem; | 56px | copy |
| .p-16 | padding: 4rem; | 64px | copy |
| .p-20 | padding: 5rem; | 80px | copy |
| .p-24 | padding: 6rem; | 96px | copy |
| .p-28 | padding: 7rem; | 112px | copy |
| .p-32 | padding: 8rem; | 128px | copy |
| .p-36 | padding: 9rem; | 144px | copy |
| .p-40 | padding: 10rem; | 160px | copy |
| .p-44 | padding: 11rem; | 176px | copy |
| .p-48 | padding: 12rem; | 192px | copy |
| .p-52 | padding: 13rem; | 208px | copy |
| .p-56 | padding: 14rem; | 224px | copy |
| .p-64 | padding: 16rem; | 256px | copy |
| .p-72 | padding: 18rem; | 288px | copy |
| .p-80 | padding: 20rem; | 320px | copy |
| .p-96 | padding: 24rem; | 384px | copy |
| .p-px | padding: 1px; | copy | |
| .py-0 | padding-top: 0; padding-bottom: 0; | copy | |
| .px-0 | padding-left: 0; padding-right: 0; | copy | |
| .py-0.5 | padding-top: 0.125rem; padding-bottom: 0.125rem; | 2px | copy |
| .px-0.5 | padding-left: 0.125rem; padding-right: 0.125rem; | 2px | copy |
| .py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem; | 4px | copy |
| .px-1 | padding-left: 0.25rem; padding-right: 0.25rem; | 4px | copy |
| .py-1.5 | padding-top: 0.375rem; padding-bottom: 0.375rem; | 6px | copy |
| .px-1.5 | padding-left: 0.375rem; padding-right: 0.375rem; | 6px | copy |
| .py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem; | 8px | copy |
| .px-2 | padding-left: 0.5rem; padding-right: 0.5rem; | 8px | copy |
| .py-2.5 | padding-top: 0.625rem; padding-bottom: 0.625rem; | 10px | copy |
| .px-2.5 | padding-left: 0.625rem; padding-right: 0.625rem; | 10px | copy |
| .py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem; | 12px | copy |
| .px-3 | padding-left: 0.75rem; padding-right: 0.75rem; | 12px | copy |
| .py-3.5 | padding-top: 0.875rem; padding-bottom: 0.875rem; | 14px | copy |
| .px-3.5 | padding-left: 0.875rem; padding-right: 0.875rem; | 14px | copy |
| .py-4 | padding-top: 1rem; padding-bottom: 1rem; | 16px | copy |
| .px-4 | padding-left: 1rem; padding-right: 1rem; | 16px | copy |
| .py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem; | 20px | copy |
| .px-5 | padding-left: 1.25rem; padding-right: 1.25rem; | 20px | copy |
| .py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem; | 24px | copy |
| .px-6 | padding-left: 1.5rem; padding-right: 1.5rem; | 24px | copy |
| .py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem; | 24px | copy |
| .px-7 | padding-left: 1.75rem; padding-right: 1.75rem; | 24px | copy |
| .py-8 | padding-top: 2rem; padding-bottom: 2rem; | 32px | copy |
| .px-8 | padding-left: 2rem; padding-right: 2rem; | 32px | copy |
| .py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem; | 36px | copy |
| .px-9 | padding-left: 2.25rem; padding-right: 2.25rem; | 36px | copy |
| .py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem; | 40px | copy |
| .px-10 | padding-left: 2.5rem; padding-right: 2.5rem; | 40px | copy |
| .py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem; | 44px | copy |
| .px-11 | padding-left: 2.75rem; padding-right: 2.75rem; | 44px | copy |
| .py-12 | padding-top: 3rem; padding-bottom: 3rem; | 48px | copy |
| .px-12 | padding-left: 3rem; padding-right: 3rem; | 48px | copy |
| .py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem; | 56px | copy |
| .px-14 | padding-left: 3.5rem; padding-right: 3.5rem; | 56px | copy |
| .py-16 | padding-top: 4rem; padding-bottom: 4rem; | 64px | copy |
| .px-16 | padding-left: 4rem; padding-right: 4rem; | 64px | copy |
| .py-20 | padding-top: 5rem; padding-bottom: 5rem; | 80px | copy |
| .px-20 | padding-left: 5rem; padding-right: 5rem; | 80px | copy |
| .py-24 | padding-top: 6rem; padding-bottom: 6rem; | 96px | copy |
| .px-24 | padding-left: 6rem; padding-right: 6rem; | 96px | copy |
| .py-28 | padding-top: 7rem; padding-bottom: 7rem; | 112px | copy |
| .px-28 | padding-left: 7rem; padding-right: 7rem; | 112px | copy |
| .py-32 | padding-top: 8rem; padding-bottom: 8rem; | 128px | copy |
| .px-32 | padding-left: 8rem; padding-right: 8rem; | 128px | copy |
| .py-36 | padding-top: 9rem; padding-bottom: 9rem; | 144px | copy |
| .px-36 | padding-left: 9rem; padding-right: 9rem; | 144px | copy |
| .py-40 | padding-top: 10rem; padding-bottom: 10rem; | 160px | copy |
| .px-40 | padding-left: 10rem; padding-right: 10rem; | 160px | copy |
| .py-44 | padding-top: 11rem; padding-bottom: 11rem; | 176px | copy |
| .px-44 | padding-left: 11rem; padding-right: 11rem; | 176px | copy |
| .py-48 | padding-top: 12rem; padding-bottom: 12rem; | 192px | copy |
| .px-48 | padding-left: 12rem; padding-right: 12rem; | 192px | copy |
| .py-52 | padding-top: 13rem; padding-bottom: 13rem; | 208px | copy |
| .px-52 | padding-left: 13rem; padding-right: 13rem; | 208px | copy |
| .py-56 | padding-top: 14rem; padding-bottom: 14rem; | 224px | copy |
| .px-56 | padding-left: 14rem; padding-right: 14rem; | 224px | copy |
| .py-60 | padding-top: 15rem; padding-bottom: 15rem; | 240px | copy |
| .px-60 | padding-left: 15rem; padding-right: 15rem; | 240px | copy |
| .py-64 | padding-top: 16rem; padding-bottom: 16rem; | 256px | copy |
| .px-64 | padding-left: 16rem; padding-right: 16rem; | 256px | copy |
| .py-70 | padding-top: 18rem; padding-bottom: 18rem; | 280px | copy |
| .px-70 | padding-left: 18rem; padding-right: 18rem; | 280px | copy |
| .py-80 | padding-top: 20rem; padding-bottom: 20rem; | 320px | copy |
| .px-80 | padding-left: 20rem; padding-right: 20rem; | 320px | copy |
| .py-96 | padding-top: 24rem; padding-bottom: 24rem; | 384px | copy |
| .px-96 | padding-left: 24rem; padding-right: 24rem; | 384px | copy |
| .py-px | padding-top: 1px; padding-bottom: 1px; | copy | |
| .px-px | padding-left: 1px; padding-right: 1px; | copy | |
| .pt-0 | padding-top: 0; | copy | |
| .pr-0 | padding-right: 0; | copy | |
| .pb-0 | padding-bottom: 0; | copy | |
| .pl-0 | padding-left: 0; | copy | |
| .pt-0.5 | padding-top: 0.125rem; | 2px | copy |
| .pr-0.5 | padding-right: 0.125rem; | 2px | copy |
| .pb-0.5 | padding-bottom: 0.125rem; | 2px | copy |
| .pl-0.5 | padding-left: 0.125rem; | 2px | copy |
| .pt-1 | padding-top: 0.25rem; | 4px | copy |
| .pr-1 | padding-right: 0.25rem; | 4px | copy |
| .pb-1 | padding-bottom: 0.25rem; | 4px | copy |
| .pl-1 | padding-left: 0.25rem; | 4px | copy |
| .pt-1.5 | padding-top: 0.375rem; | 6px | copy |
| .pr-1.5 | padding-right: 0.375rem; | 6px | copy |
| .pb-1.5 | padding-bottom: 0.375rem; | 6px | copy |
| .pl-1.5 | padding-left: 0.375rem; | 6px | copy |
| .pt-2 | padding-top: 0.5rem; | 8px | copy |
| .pr-2 | padding-right: 0.5rem; | 8px | copy |
| .pb-2 | padding-bottom: 0.5rem; | 8px | copy |
| .pl-2 | padding-left: 0.5rem; | 8px | copy |
| .pt-2.5 | padding-top: 0.625rem; | 10px | copy |
| .pr-2.5 | padding-right: 0.625rem; | 10px | copy |
| .pb-2.5 | padding-bottom: 0.625rem; | 10px | copy |
| .pl-2.5 | padding-left: 0.625rem; | 10px | copy |
| .pt-3 | padding-top: 0.75rem; | 12px | copy |
| .pr-3 | padding-right: 0.75rem; | 12px | copy |
| .pb-3 | padding-bottom: 0.75rem; | 12px | copy |
| .pl-3 | padding-left: 0.75rem; | 12px | copy |
| .pt-3.5 | padding-top: 0.875rem; | 14px | copy |
| .pr-3.5 | padding-right: 0.875rem; | 14px | copy |
| .pb-3.5 | padding-bottom: 0.875rem; | 14px | copy |
| .pl-3.5 | padding-left: 0.875rem; | 14px | copy |
| .pt-4 | padding-top: 1rem; | 16px | copy |
| .pr-4 | padding-right: 1rem; | 16px | copy |
| .pb-4 | padding-bottom: 1rem; | 16px | copy |
| .pl-4 | padding-left: 1rem; | 16px | copy |
| .pt-5 | padding-top: 1.25rem; | 20px | copy |
| .pr-5 | padding-right: 1.25rem; | 20px | copy |
| .pb-5 | padding-bottom: 1.25rem; | 20px | copy |
| .pl-5 | padding-left: 1.25rem; | 20px | copy |
| .pt-6 | padding-top: 1.5rem; | 24px | copy |
| .pr-6 | padding-right: 1.5rem; | 24px | copy |
| .pb-6 | padding-bottom: 1.5rem; | 24px | copy |
| .pl-6 | padding-left: 1.5rem; | 24px | copy |
| .pt-7 | padding-top: 1.75rem; | 28px | copy |
| .pr-7 | padding-right: 1.75rem; | 28px | copy |
| .pb-7 | padding-bottom: 1.75rem; | 28px | copy |
| .pl-7 | padding-left: 1.75rem; | 28px | copy |
| .pt-8 | padding-top: 2rem; | 32px | copy |
| .pr-8 | padding-right: 2rem; | 32px | copy |
| .pb-8 | padding-bottom: 2rem; | 32px | copy |
| .pl-8 | padding-left: 2rem; | 32px | copy |
| .pt-9 | padding-top: 2.25rem; | 36px | copy |
| .pr-9 | padding-right: 2.25rem; | 36px | copy |
| .pb-9 | padding-bottom: 2.25rem; | 36px | copy |
| .pl-9 | padding-left: 2.25rem; | 36px | copy |
| .pt-10 | padding-top: 2.5rem; | 40px | copy |
| .pr-10 | padding-right: 2.5rem; | 40px | copy |
| .pb-10 | padding-bottom: 2.5rem; | 40px | copy |
| .pl-10 | padding-left: 2.5rem; | 40px | copy |
| .pt-11 | padding-top: 2.75rem; | 44px | copy |
| .pr-11 | padding-right: 2.75rem; | 44px | copy |
| .pb-11 | padding-bottom: 2.75rem; | 44px | copy |
| .pl-11 | padding-left: 2.75rem; | 44px | copy |
| .pt-12 | padding-top: 3rem; | 48px | copy |
| .pr-12 | padding-right: 3rem; | 48px | copy |
| .pb-12 | padding-bottom: 3rem; | 48px | copy |
| .pl-12 | padding-left: 3rem; | 48px | copy |
| .pt-14 | padding-top: 3.5rem; | 56px | copy |
| .pr-14 | padding-right: 3.5rem; | 56px | copy |
| .pb-14 | padding-bottom: 3.5rem; | 56px | copy |
| .pl-14 | padding-left: 3.5rem; | 56px | copy |
| .pt-16 | padding-top: 4rem; | 64px | copy |
| .pr-16 | padding-right: 4rem; | 64px | copy |
| .pb-16 | padding-bottom: 4rem; | 64px | copy |
| .pl-16 | padding-left: 4rem; | 64px | copy |
| .pt-20 | padding-top: 5rem; | 80px | copy |
| .pr-20 | padding-right: 5rem; | 80px | copy |
| .pb-20 | padding-bottom: 5rem; | 80px | copy |
| .pl-20 | padding-left: 5rem; | 80px | copy |
| .pt-24 | padding-top: 6rem; | 96px | copy |
| .pr-24 | padding-right: 6rem; | 96px | copy |
| .pb-24 | padding-bottom: 6rem; | 96px | copy |
| .pl-24 | padding-left: 6rem; | 96px | copy |
| .pt-28 | padding-top: 7rem; | 112px | copy |
| .pr-28 | padding-right: 7rem; | 112px | copy |
| .pb-28 | padding-bottom: 7rem; | 112px | copy |
| .pl-28 | padding-left: 7rem; | 112px | copy |
| .pt-32 | padding-top: 8rem; | 128px | copy |
| .pr-32 | padding-right: 8rem; | 128px | copy |
| .pb-32 | padding-bottom: 8rem; | 128px | copy |
| .pl-32 | padding-left: 8rem; | 128px | copy |
| .pt-36 | padding-top: 9rem; | 144px | copy |
| .pr-36 | padding-right: 9rem; | 144px | copy |
| .pb-36 | padding-bottom: 9rem; | 144px | copy |
| .pl-36 | padding-left: 9rem; | 144px | copy |
| .pt-40 | padding-top: 10rem; | 160px | copy |
| .pr-40 | padding-right: 10rem; | 160px | copy |
| .pb-40 | padding-bottom: 10rem; | 160px | copy |
| .pl-40 | padding-left: 10rem; | 160px | copy |
| .pt-44 | padding-top: 11rem; | 176px | copy |
| .pr-44 | padding-right: 11rem; | 176px | copy |
| .pb-44 | padding-bottom: 11rem; | 176px | copy |
| .pl-44 | padding-left: 11rem; | 176px | copy |
| .pt-48 | padding-top: 12rem; | 192px | copy |
| .pr-48 | padding-right: 12rem; | 192px | copy |
| .pb-48 | padding-bottom: 12rem; | 192px | copy |
| .pl-48 | padding-left: 12rem; | 192px | copy |
| .pt-52 | padding-top: 13rem; | 208px | copy |
| .pr-52 | padding-right: 13rem; | 208px | copy |
| .pb-52 | padding-bottom: 13rem; | 208px | copy |
| .pl-52 | padding-left: 13rem; | 208px | copy |
| .pt-56 | padding-top: 14rem; | 224px | copy |
| .pr-56 | padding-right: 14rem; | 224px | copy |
| .pb-56 | padding-bottom: 14rem; | 224px | copy |
| .pl-56 | padding-left: 14rem; | 224px | copy |
| .pt-60 | padding-top: 15rem; | 240px | copy |
| .pr-60 | padding-right: 15rem; | 240px | copy |
| .pb-60 | padding-bottom: 15rem; | 240px | copy |
| .pl-60 | padding-left: 15rem; | 240px | copy |
| .pt-64 | padding-top: 16rem; | 256px | copy |
| .pr-64 | padding-right: 16rem; | 256px | copy |
| .pb-64 | padding-bottom: 16rem; | 256px | copy |
| .pl-64 | padding-left: 16rem; | 256px | copy |
| .pt-72 | padding-top: 18rem; | 288px | copy |
| .pr-72 | padding-right: 18rem; | 288px | copy |
| .pb-72 | padding-bottom: 18rem; | 288px | copy |
| .pl-72 | padding-left: 18rem; | 288px | copy |
| .pt-80 | padding-top: 20rem; | 320px | copy |
| .pr-80 | padding-right: 20rem; | 320px | copy |
| .pb-80 | padding-bottom: 20rem; | 320px | copy |
| .pl-80 | padding-left: 20rem; | 320px | copy |
| .pt-96 | padding-top: 24rem; | 384px | copy |
| .pr-96 | padding-right: 24rem; | 384px | copy |
| .pb-96 | padding-bottom: 24rem; | 384px | copy |
| .pl-96 | padding-left: 24rem; | 384px | copy |
| .pt-px | padding-top: 1px; | copy | |
| .pr-px | padding-right: 1px; | copy | |
| .pb-px | padding-bottom: 1px; | copy | |
| .pl-px | padding-left: 1px; | copy |
Set the margin area of an element on all sides, vertically, horizontally, or just on one side. [view docs]
| .m-0 | margin: 0; | copy | |
| .m-0.5 | margin: 0.125rem; | 2px | copy |
| .m-1 | margin: 0.25rem; | 4px | copy |
| .m-1.5 | margin: 0.375rem; | 6px | copy |
| .m-2 | margin: 0.5rem; | 8px | copy |
| .m-2.5 | margin: 0.625rem; | 10px | copy |
| .m-3 | margin: 0.75rem; | 12px | copy |
| .m-3.5 | margin: 0.875rem; | 14px | copy |
| .m-4 | margin: 1rem; | 16px | copy |
| .m-5 | margin: 1.25rem; | 20px | copy |
| .m-6 | margin: 1.5rem; | 24px | copy |
| .m-8 | margin: 2rem; | 32px | copy |
| .m-10 | margin: 2.5rem; | 40px | copy |
| .m-11 | margin: 2.75rem; | 44px | copy |
| .m-12 | margin: 3rem; | 48px | copy |
| .m-14 | margin: 3.5rem; | 56px | copy |
| .m-16 | margin: 4rem; | 64px | copy |
| .m-20 | margin: 5rem; | 80px | copy |
| .m-24 | margin: 6rem; | 96px | copy |
| .m-28 | margin: 7rem; | 112px | copy |
| .m-32 | margin: 8rem; | 128px | copy |
| .m-36 | margin: 9rem; | 144px | copy |
| .m-40 | margin: 10rem; | 160px | copy |
| .m-44 | margin: 11rem; | 176px | copy |
| .m-48 | margin: 12rem; | 192px | copy |
| .m-52 | margin: 13rem; | 208px | copy |
| .m-56 | margin: 14rem; | 224px | copy |
| .m-64 | margin: 16rem; | 256px | copy |
| .m-72 | margin: 18rem; | 288px | copy |
| .m-80 | margin: 20rem; | 320px | copy |
| .m-96 | margin: 24rem; | 384px | copy |
| .m-px | margin: 1px; | copy | |
| .my-0 | margin-top: 0; margin-bottom: 0; | copy | |
| .mx-0 | margin-left: 0; margin-right: 0; | copy | |
| .my-0.5 | margin-top: 0.125rem; margin-bottom: 0.125rem; | 2px | copy |
| .mx-0.5 | margin-left: 0.125rem; margin-right: 0.125rem; | 2px | copy |
| .my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem; | 4px | copy |
| .mx-1 | margin-left: 0.25rem; margin-right: 0.25rem; | 4px | copy |
| .my-1.5 | margin-top: 0.375rem; margin-bottom: 0.375rem; | 6px | copy |
| .mx-1.5 | margin-left: 0.375rem; margin-right: 0.375rem; | 6px | copy |
| .my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem; | 8px | copy |
| .mx-2 | margin-left: 0.5rem; margin-right: 0.5rem; | 8px | copy |
| .my-2.5 | margin-top: 0.625rem; margin-bottom: 0.625rem; | 10px | copy |
| .mx-2.5 | margin-left: 0.625rem; margin-right: 0.625rem; | 10px | copy |
| .my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem; | 12px | copy |
| .mx-3 | margin-left: 0.75rem; margin-right: 0.75rem; | 12px | copy |
| .my-3.5 | margin-top: 0.875rem; margin-bottom: 0.875rem; | 14px | copy |
| .mx-3.5 | margin-left: 0.875rem; margin-right: 0.875rem; | 14px | copy |
| .my-4 | margin-top: 1rem; margin-bottom: 1rem; | 16px | copy |
| .mx-4 | margin-left: 1rem; margin-right: 1rem; | 16px | copy |
| .my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem; | 20px | copy |
| .mx-5 | margin-left: 1.25rem; margin-right: 1.25rem; | 20px | copy |
| .my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem; | 24px | copy |
| .mx-6 | margin-left: 1.5rem; margin-right: 1.5rem; | 24px | copy |
| .my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem; | 24px | copy |
| .mx-7 | margin-left: 1.75rem; margin-right: 1.75rem; | 24px | copy |
| .my-8 | margin-top: 2rem; margin-bottom: 2rem; | 32px | copy |
| .mx-8 | margin-left: 2rem; margin-right: 2rem; | 32px | copy |
| .my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem; | 36px | copy |
| .mx-9 | margin-left: 2.25rem; margin-right: 2.25rem; | 36px | copy |
| .my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem; | 40px | copy |
| .mx-10 | margin-left: 2.5rem; margin-right: 2.5rem; | 40px | copy |
| .my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem; | 44px | copy |
| .mx-11 | margin-left: 2.75rem; margin-right: 2.75rem; | 44px | copy |
| .my-12 | margin-top: 3rem; margin-bottom: 3rem; | 48px | copy |
| .mx-12 | margin-left: 3rem; margin-right: 3rem; | 48px | copy |
| .my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem; | 56px | copy |
| .mx-14 | margin-left: 3.5rem; margin-right: 3.5rem; | 56px | copy |
| .my-16 | margin-top: 4rem; margin-bottom: 4rem; | 64px | copy |
| .mx-16 | margin-left: 4rem; margin-right: 4rem; | 64px | copy |
| .my-20 | margin-top: 5rem; margin-bottom: 5rem; | 80px | copy |
| .mx-20 | margin-left: 5rem; margin-right: 5rem; | 80px | copy |
| .my-24 | margin-top: 6rem; margin-bottom: 6rem; | 96px | copy |
| .mx-24 | margin-left: 6rem; margin-right: 6rem; | 96px | copy |
| .my-28 | margin-top: 7rem; margin-bottom: 7rem; | 112px | copy |
| .mx-28 | margin-left: 7rem; margin-right: 7rem; | 112px | copy |
| .my-32 | margin-top: 8rem; margin-bottom: 8rem; | 128px | copy |
| .mx-32 | margin-left: 8rem; margin-right: 8rem; | 128px | copy |
| .my-36 | margin-top: 9rem; margin-bottom: 9rem; | 144px | copy |
| .mx-36 | margin-left: 9rem; margin-right: 9rem; | 144px | copy |
| .my-40 | margin-top: 10rem; margin-bottom: 10rem; | 160px | copy |
| .mx-40 | margin-left: 10rem; margin-right: 10rem; | 160px | copy |
| .my-44 | margin-top: 11rem; margin-bottom: 11rem; | 176px | copy |
| .mx-44 | margin-left: 11rem; margin-right: 11rem; | 176px | copy |
| .my-48 | margin-top: 12rem; margin-bottom: 12rem; | 192px | copy |
| .mx-48 | margin-left: 12rem; margin-right: 12rem; | 192px | copy |
| .my-52 | margin-top: 13rem; margin-bottom: 13rem; | 208px | copy |
| .mx-52 | margin-left: 13rem; margin-right: 13rem; | 208px | copy |
| .my-56 | margin-top: 14rem; margin-bottom: 14rem; | 224px | copy |
| .mx-56 | margin-left: 14rem; margin-right: 14rem; | 224px | copy |
| .my-60 | margin-top: 15rem; margin-bottom: 15rem; | 240px | copy |
| .mx-60 | margin-left: 15rem; margin-right: 15rem; | 240px | copy |
| .my-64 | margin-top: 16rem; margin-bottom: 16rem; | 256px | copy |
| .mx-64 | margin-left: 16rem; margin-right: 16rem; | 256px | copy |
| .my-70 | margin-top: 18rem; margin-bottom: 18rem; | 280px | copy |
| .mx-70 | margin-left: 18rem; margin-right: 18rem; | 280px | copy |
| .my-80 | margin-top: 20rem; margin-bottom: 20rem; | 320px | copy |
| .mx-80 | margin-left: 20rem; margin-right: 20rem; | 320px | copy |
| .my-96 | margin-top: 24rem; margin-bottom: 24rem; | 384px | copy |
| .mx-96 | margin-left: 24rem; margin-right: 24rem; | 384px | copy |
| .my-px | margin-top: 1px; margin-bottom: 1px; | copy | |
| .mx-px | margin-left: 1px; margin-right: 1px; | copy | |
| .mt-0 | margin-top: 0; | copy | |
| .mr-0 | margin-right: 0; | copy | |
| .mb-0 | margin-bottom: 0; | copy | |
| .ml-0 | margin-left: 0; | copy | |
| .mt-0.5 | margin-top: 0.125rem; | 2px | copy |
| .mr-0.5 | margin-right: 0.125rem; | 2px | copy |
| .mb-0.5 | margin-bottom: 0.125rem; | 2px | copy |
| .ml-0.5 | margin-left: 0.125rem; | 2px | copy |
| .mt-1 | margin-top: 0.25rem; | 4px | copy |
| .mr-1 | margin-right: 0.25rem; | 4px | copy |
| .mb-1 | margin-bottom: 0.25rem; | 4px | copy |
| .ml-1 | margin-left: 0.25rem; | 4px | copy |
| .mt-1.5 | margin-top: 0.375rem; | 6px | copy |
| .mr-1.5 | margin-right: 0.375rem; | 6px | copy |
| .mb-1.5 | margin-bottom: 0.375rem; | 6px | copy |
| .ml-1.5 | margin-left: 0.375rem; | 6px | copy |
| .mt-2 | margin-top: 0.5rem; | 8px | copy |
| .mr-2 | margin-right: 0.5rem; | 8px | copy |
| .mb-2 | margin-bottom: 0.5rem; | 8px | copy |
| .ml-2 | margin-left: 0.5rem; | 8px | copy |
| .mt-2.5 | margin-top: 0.625rem; | 10px | copy |
| .mr-2.5 | margin-right: 0.625rem; | 10px | copy |
| .mb-2.5 | margin-bottom: 0.625rem; | 10px | copy |
| .ml-2.5 | margin-left: 0.625rem; | 10px | copy |
| .mt-3 | margin-top: 0.75rem; | 12px | copy |
| .mr-3 | margin-right: 0.75rem; | 12px | copy |
| .mb-3 | margin-bottom: 0.75rem; | 12px | copy |
| .ml-3 | margin-left: 0.75rem; | 12px | copy |
| .mt-3.5 | margin-top: 0.875rem; | 14px | copy |
| .mr-3.5 | margin-right: 0.875rem; | 14px | copy |
| .mb-3.5 | margin-bottom: 0.875rem; | 14px | copy |
| .ml-3.5 | margin-left: 0.875rem; | 14px | copy |
| .mt-4 | margin-top: 1rem; | 16px | copy |
| .mr-4 | margin-right: 1rem; | 16px | copy |
| .mb-4 | margin-bottom: 1rem; | 16px | copy |
| .ml-4 | margin-left: 1rem; | 16px | copy |
| .mt-5 | margin-top: 1.25rem; | 20px | copy |
| .mr-5 | margin-right: 1.25rem; | 20px | copy |
| .mb-5 | margin-bottom: 1.25rem; | 20px | copy |
| .ml-5 | margin-left: 1.25rem; | 20px | copy |
| .mt-6 | margin-top: 1.5rem; | 24px | copy |
| .mr-6 | margin-right: 1.5rem; | 24px | copy |
| .mb-6 | margin-bottom: 1.5rem; | 24px | copy |
| .ml-6 | margin-left: 1.5rem; | 24px | copy |
| .mt-7 | margin-top: 1.75rem; | 28px | copy |
| .mr-7 | margin-right: 1.75rem; | 28px | copy |
| .mb-7 | margin-bottom: 1.75rem; | 28px | copy |
| .ml-7 | margin-left: 1.75rem; | 28px | copy |
| .mt-8 | margin-top: 2rem; | 32px | copy |
| .mr-8 | margin-right: 2rem; | 32px | copy |
| .mb-8 | margin-bottom: 2rem; | 32px | copy |
| .ml-8 | margin-left: 2rem; | 32px | copy |
| .mt-9 | margin-top: 2.25rem; | 36px | copy |
| .mr-9 | margin-right: 2.25rem; | 36px | copy |
| .mb-9 | margin-bottom: 2.25rem; | 36px | copy |
| .ml-9 | margin-left: 2.25rem; | 36px | copy |
| .mt-10 | margin-top: 2.5rem; | 40px | copy |
| .mr-10 | margin-right: 2.5rem; | 40px | copy |
| .mb-10 | margin-bottom: 2.5rem; | 40px | copy |
| .ml-10 | margin-left: 2.5rem; | 40px | copy |
| .mt-11 | margin-top: 2.75rem; | 44px | copy |
| .mr-11 | margin-right: 2.75rem; | 44px | copy |
| .mb-11 | margin-bottom: 2.75rem; | 44px | copy |
| .ml-11 | margin-left: 2.75rem; | 44px | copy |
| .mt-12 | margin-top: 3rem; | 48px | copy |
| .mr-12 | margin-right: 3rem; | 48px | copy |
| .mb-12 | margin-bottom: 3rem; | 48px | copy |
| .ml-12 | margin-left: 3rem; | 48px | copy |
| .mt-14 | margin-top: 3.5rem; | 56px | copy |
| .mr-14 | margin-right: 3.5rem; | 56px | copy |
| .mb-14 | margin-bottom: 3.5rem; | 56px | copy |
| .ml-14 | margin-left: 3.5rem; | 56px | copy |
| .mt-16 | margin-top: 4rem; | 64px | copy |
| .mr-16 | margin-right: 4rem; | 64px | copy |
| .mb-16 | margin-bottom: 4rem; | 64px | copy |
| .ml-16 | margin-left: 4rem; | 64px | copy |
| .mt-20 | margin-top: 5rem; | 80px | copy |
| .mr-20 | margin-right: 5rem; | 80px | copy |
| .mb-20 | margin-bottom: 5rem; | 80px | copy |
| .ml-20 | margin-left: 5rem; | 80px | copy |
| .mt-24 | margin-top: 6rem; | 96px | copy |
| .mr-24 | margin-right: 6rem; | 96px | copy |
| .mb-24 | margin-bottom: 6rem; | 96px | copy |
| .ml-24 | margin-left: 6rem; | 96px | copy |
| .mt-28 | margin-top: 7rem; | 112px | copy |
| .mr-28 | margin-right: 7rem; | 112px | copy |
| .mb-28 | margin-bottom: 7rem; | 112px | copy |
| .ml-28 | margin-left: 7rem; | 112px | copy |
| .mt-32 | margin-top: 8rem; | 128px | copy |
| .mr-32 | margin-right: 8rem; | 128px | copy |
| .mb-32 | margin-bottom: 8rem; | 128px | copy |
| .ml-32 | margin-left: 8rem; | 128px | copy |
| .mt-36 | margin-top: 9rem; | 144px | copy |
| .mr-36 | margin-right: 9rem; | 144px | copy |
| .mb-36 | margin-bottom: 9rem; | 144px | copy |
| .ml-36 | margin-left: 9rem; | 144px | copy |
| .mt-40 | margin-top: 10rem; | 160px | copy |
| .mr-40 | margin-right: 10rem; | 160px | copy |
| .mb-40 | margin-bottom: 10rem; | 160px | copy |
| .ml-40 | margin-left: 10rem; | 160px | copy |
| .mt-44 | margin-top: 11rem; | 176px | copy |
| .mr-44 | margin-right: 11rem; | 176px | copy |
| .mb-44 | margin-bottom: 11rem; | 176px | copy |
| .ml-44 | margin-left: 11rem; | 176px | copy |
| .mt-48 | margin-top: 12rem; | 192px | copy |
| .mr-48 | margin-right: 12rem; | 192px | copy |
| .mb-48 | margin-bottom: 12rem; | 192px | copy |
| .ml-48 | margin-left: 12rem; | 192px | copy |
| .mt-52 | margin-top: 13rem; | 208px | copy |
| .mr-52 | margin-right: 13rem; | 208px | copy |
| .mb-52 | margin-bottom: 13rem; | 208px | copy |
| .ml-52 | margin-left: 13rem; | 208px | copy |
| .mt-56 | margin-top: 14rem; | 224px | copy |
| .mr-56 | margin-right: 14rem; | 224px | copy |
| .mb-56 | margin-bottom: 14rem; | 224px | copy |
| .ml-56 | margin-left: 14rem; | 224px | copy |
| .mt-60 | margin-top: 15rem; | 240px | copy |
| .mr-60 | margin-right: 15rem; | 240px | copy |
| .mb-60 | margin-bottom: 15rem; | 240px | copy |
| .ml-60 | margin-left: 15rem; | 240px | copy |
| .mt-64 | margin-top: 16rem; | 256px | copy |
| .mr-64 | margin-right: 16rem; | 256px | copy |
| .mb-64 | margin-bottom: 16rem; | 256px | copy |
| .ml-64 | margin-left: 16rem; | 256px | copy |
| .mt-72 | margin-top: 18rem; | 288px | copy |
| .mr-72 | margin-right: 18rem; | 288px | copy |
| .mb-72 | margin-bottom: 18rem; | 288px | copy |
| .ml-72 | margin-left: 18rem; | 288px | copy |
| .mt-80 | margin-top: 20rem; | 320px | copy |
| .mr-80 | margin-right: 20rem; | 320px | copy |
| .mb-80 | margin-bottom: 20rem; | 320px | copy |
| .ml-80 | margin-left: 20rem; | 320px | copy |
| .mt-96 | margin-top: 24rem; | 384px | copy |
| .mr-96 | margin-right: 24rem; | 384px | copy |
| .mb-96 | margin-bottom: 24rem; | 384px | copy |
| .ml-96 | margin-left: 24rem; | 384px | copy |
| .mt-px | margin-top: 1px; | copy | |
| .mr-px | margin-right: 1px; | copy | |
| .mb-px | margin-bottom: 1px; | copy | |
| .ml-px | margin-left: 1px; | copy | |
| .-m-0 | margin: 0; | copy | |
| .-m-0.5 | margin: -0.125rem; | 2px | copy |
| .-m-1 | margin: -0.25rem; | 4px | copy |
| .-m-1.5 | margin: -0.375rem; | 6px | copy |
| .-m-2 | margin: -0.5rem; | 8px | copy |
| .-m-2.5 | margin: -0.625rem; | 10px | copy |
| .-m-3 | margin: -0.75rem; | 12px | copy |
| .-m-3.5 | margin: -0.875rem; | 14px | copy |
| .-m-4 | margin: -1rem; | 16px | copy |
| .-m-5 | margin: -1.25rem; | 20px | copy |
| .-m-6 | margin: -1.5rem; | 24px | copy |
| .-m-8 | margin: -2rem; | 32px | copy |
| .-m-10 | margin: -2.5rem; | 40px | copy |
| .-m-11 | margin: -2.75rem; | 44px | copy |
| .-m-12 | margin: -3rem; | 48px | copy |
| .-m-14 | margin: -3.5rem; | 56px | copy |
| .-m-16 | margin: -4rem; | 64px | copy |
| .-m-20 | margin: -5rem; | 80px | copy |
| .-m-24 | margin: -6rem; | 96px | copy |
| .-m-28 | margin: -7rem; | 112px | copy |
| .-m-32 | margin: -8rem; | 128px | copy |
| .-m-36 | margin: -9rem; | 144px | copy |
| .-m-40 | margin: -10rem; | 160px | copy |
| .-m-44 | margin: -11rem; | 176px | copy |
| .-m-48 | margin: -12rem; | 192px | copy |
| .-m-52 | margin: -13rem; | 208px | copy |
| .-m-56 | margin: -14rem; | 224px | copy |
| .-m-64 | margin: -16rem; | 256px | copy |
| .-m-72 | margin: -18rem; | 288px | copy |
| .-m-80 | margin: -20rem; | 320px | copy |
| .-m-96 | margin: -24rem; | 384px | copy |
| .-m-px | margin: -1px; | copy | |
| .-my-0 | margin-top: 0; margin-bottom: 0; | copy | |
| .-mx-0 | margin-left: 0; margin-right: 0; | copy | |
| .-my-0.5 | margin-top: -0.125rem; margin-bottom: -0.125rem; | 2px | copy |
| .-mx-0.5 | margin-left: -0.125rem; margin-right: -0.125rem; | 2px | copy |
| .-my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem; | 4px | copy |
| .-mx-1 | margin-left: -0.25rem; margin-right: -0.25rem; | 4px | copy |
| .-my-1.5 | margin-top: -0.375rem; margin-bottom: -0.375rem; | 6px | copy |
| .-mx-1.5 | margin-left: -0.375rem; margin-right: -0.375rem; | 6px | copy |
| .-my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem; | 8px | copy |
| .-mx-2 | margin-left: -0.5rem; margin-right: -0.5rem; | 8px | copy |
| .-my-2.5 | margin-top: -0.625rem; margin-bottom: -0.625rem; | 10px | copy |
| .-mx-2.5 | margin-left: -0.625rem; margin-right: -0.625rem; | 10px | copy |
| .-my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem; | 12px | copy |
| .-mx-3 | margin-left: -0.75rem; margin-right: -0.75rem; | 12px | copy |
| .-my-3.5 | margin-top: -0.875rem; margin-bottom: -0.875rem; | 14px | copy |
| .-mx-3.5 | margin-left: -0.875rem; margin-right: -0.875rem; | 14px | copy |
| .-my-4 | margin-top: -1rem; margin-bottom: -1rem; | 16px | copy |
| .-mx-4 | margin-left: -1rem; margin-right: -1rem; | 16px | copy |
| .-my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem; | 20px | copy |
| .-mx-5 | margin-left: -1.25rem; margin-right: -1.25rem; | 20px | copy |
| .-my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem; | 24px | copy |
| .-mx-6 | margin-left: -1.5rem; margin-right: -1.5rem; | 24px | copy |
| .-my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem; | 24px | copy |
| .-mx-7 | margin-left: 1.75rem; margin-right: 1.75rem; | 24px | copy |
| .-my-8 | margin-top: -2rem; margin-bottom: -2rem; | 32px | copy |
| .-mx-8 | margin-left: -2rem; margin-right: -2rem; | 32px | copy |
| .-my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem; | 36px | copy |
| .-mx-9 | margin-left: 2.25rem; margin-right: 2.25rem; | 36px | copy |
| .-my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem; | 40px | copy |
| .-mx-10 | margin-left: -2.5rem; margin-right: -2.5rem; | 40px | copy |
| .-my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem; | 44px | copy |
| .-mx-11 | margin-left: -2.75rem; margin-right: -2.75rem; | 44px | copy |
| .-my-12 | margin-top: -3rem; margin-bottom: -3rem; | 48px | copy |
| .-mx-12 | margin-left: -3rem; margin-right: -3rem; | 48px | copy |
| .-my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem; | 56px | copy |
| .-mx-14 | margin-left: -3.5rem; margin-right: -3.5rem; | 56px | copy |
| .-my-16 | margin-top: -4rem; margin-bottom: -4rem; | 64px | copy |
| .-mx-16 | margin-left: -4rem; margin-right: -4rem; | 64px | copy |
| .-my-20 | margin-top: -5rem; margin-bottom: -5rem; | 80px | copy |
| .-mx-20 | margin-left: -5rem; margin-right: -5rem; | 80px | copy |
| .-my-24 | margin-top: -6rem; margin-bottom: -6rem; | 96px | copy |
| .-mx-24 | margin-left: -6rem; margin-right: -6rem; | 96px | copy |
| .-my-28 | margin-top: -7rem; margin-bottom: -7rem; | 112px | copy |
| .-mx-28 | margin-left: -7rem; margin-right: -7rem; | 112px | copy |
| .-my-32 | margin-top: -8rem; margin-bottom: -8rem; | 128px | copy |
| .-mx-32 | margin-left: -8rem; margin-right: -8rem; | 128px | copy |
| .-my-36 | margin-top: -9rem; margin-bottom: -9rem; | 144px | copy |
| .-mx-36 | margin-left: -9rem; margin-right: -9rem; | 144px | copy |
| .-my-40 | margin-top: -10rem; margin-bottom: -10rem; | 160px | copy |
| .-mx-40 | margin-left: -10rem; margin-right: -10rem; | 160px | copy |
| .-my-44 | margin-top: -11rem; margin-bottom: -11rem; | 176px | copy |
| .-mx-44 | margin-left: -11rem; margin-right: -11rem; | 176px | copy |
| .-my-48 | margin-top: -12rem; margin-bottom: -12rem; | 192px | copy |
| .-mx-48 | margin-left: -12rem; margin-right: -12rem; | 192px | copy |
| .-my-52 | margin-top: -13rem; margin-bottom: -13rem; | 208px | copy |
| .-mx-52 | margin-left: -13rem; margin-right: -13rem; | 208px | copy |
| .-my-56 | margin-top: -14rem; margin-bottom: -14rem; | 224px | copy |
| .-mx-56 | margin-left: -14rem; margin-right: -14rem; | 224px | copy |
| .-my-60 | margin-top: 15rem; margin-bottom: 15rem; | 240px | copy |
| .-mx-60 | margin-left: 15rem; margin-right: 15rem; | 240px | copy |
| .-my-64 | margin-top: -16rem; margin-bottom: -16rem; | 256px | copy |
| .-mx-64 | margin-left: -16rem; margin-right: -16rem; | 256px | copy |
| .-my-70 | margin-top: -18rem; margin-bottom: -18rem; | 280px | copy |
| .-mx-70 | margin-left: -18rem; margin-right: -18rem; | 280px | copy |
| .-my-80 | margin-top: -20rem; margin-bottom: -20rem; | 320px | copy |
| .-mx-80 | margin-left: -20rem; margin-right: -20rem; | 320px | copy |
| .-my-96 | margin-top: -24rem; margin-bottom: -24rem; | 384px | copy |
| .-mx-96 | margin-left: -24rem; margin-right: -24rem; | 384px | copy |
| .-my-px | margin-top: -1px; margin-bottom: -1px; | copy | |
| .-mx-px | margin-left: -1px; margin-right: -1px; | copy | |
| .-mt-0 | margin-top: 0; | copy | |
| .-mr-0 | margin-right: 0; | copy | |
| .-mb-0 | margin-bottom: 0; | copy | |
| .-ml-0 | margin-left: 0; | copy | |
| .-mt-0.5 | margin-top: -0.125rem; | 2px | copy |
| .-mr-0.5 | margin-right: -0.125rem; | 2px | copy |
| .-mb-0.5 | margin-bottom: -0.125rem; | 2px | copy |
| .-ml-0.5 | margin-left: -0.125rem; | 2px | copy |
| .-mt-1 | margin-top: -0.25rem; | 4px | copy |
| .-mr-1 | margin-right: -0.25rem; | 4px | copy |
| .-mb-1 | margin-bottom: -0.25rem; | 4px | copy |
| .-ml-1 | margin-left: -0.25rem; | 4px | copy |
| .-mt-1.5 | margin-top: -0.375rem; | 6px | copy |
| .-mr-1.5 | margin-right: -0.375rem; | 6px | copy |
| .-mb-1.5 | margin-bottom: -0.375rem; | 6px | copy |
| .-ml-1.5 | margin-left: -0.375rem; | 6px | copy |
| .-mt-2 | margin-top: -0.5rem; | 8px | copy |
| .-mr-2 | margin-right: -0.5rem; | 8px | copy |
| .-mb-2 | margin-bottom: -0.5rem; | 8px | copy |
| .-ml-2 | margin-left: -0.5rem; | 8px | copy |
| .-mt-2.5 | margin-top: -0.625rem; | 10px | copy |
| .-mr-2.5 | margin-right: -0.625rem; | 10px | copy |
| .-mb-2.5 | margin-bottom: -0.625rem; | 10px | copy |
| .-ml-2.5 | margin-left: -0.625rem; | 10px | copy |
| .-mt-3 | margin-top: -0.75rem; | 12px | copy |
| .-mr-3 | margin-right: -0.75rem; | 12px | copy |
| .-mb-3 | margin-bottom: -0.75rem; | 12px | copy |
| .-ml-3 | margin-left: -0.75rem; | 12px | copy |
| .-mt-3.5 | margin-top: -0.875rem; | 14px | copy |
| .-mr-3.5 | margin-right: -0.875rem; | 14px | copy |
| .-mb-3.5 | margin-bottom: -0.875rem; | 14px | copy |
| .-ml-3.5 | margin-left: -0.875rem; | 14px | copy |
| .-mt-4 | margin-top: -1rem; | 16px | copy |
| .-mr-4 | margin-right: -1rem; | 16px | copy |
| .-mb-4 | margin-bottom: -1rem; | 16px | copy |
| .-ml-4 | margin-left: -1rem; | 16px | copy |
| .-mt-5 | margin-top: -1.25rem; | 20px | copy |
| .-mr-5 | margin-right: -1.25rem; | 20px | copy |
| .-mb-5 | margin-bottom: -1.25rem; | 20px | copy |
| .-ml-5 | margin-left: -1.25rem; | 20px | copy |
| .-mt-6 | margin-top: -1.5rem; | 24px | copy |
| .-mr-6 | margin-right: -1.5rem; | 24px | copy |
| .-mb-6 | margin-bottom: -1.5rem; | 24px | copy |
| .-ml-6 | margin-left: -1.5rem; | 24px | copy |
| .-mt-7 | margin-top: 1.75rem; | 28px | copy |
| .-mr-7 | margin-right: 1.75rem; | 28px | copy |
| .-mb-7 | margin-bottom: 1.75rem; | 28px | copy |
| .-ml-7 | margin-left: 1.75rem; | 28px | copy |
| .-mt-8 | margin-top: -2rem; | 32px | copy |
| .-mr-8 | margin-right: -2rem; | 32px | copy |
| .-mb-8 | margin-bottom: -2rem; | 32px | copy |
| .-ml-8 | margin-left: -2rem; | 32px | copy |
| .-mt-9 | margin-top: 2.25rem; | 36px | copy |
| .-mr-9 | margin-right: 2.25rem; | 36px | copy |
| .-mb-9 | margin-bottom: 2.25rem; | 36px | copy |
| .-ml-9 | margin-left: 2.25rem; | 36px | copy |
| .-mt-10 | margin-top: -2.5rem; | 40px | copy |
| .-mr-10 | margin-right: -2.5rem; | 40px | copy |
| .-mb-10 | margin-bottom: -2.5rem; | 40px | copy |
| .-ml-10 | margin-left: -2.5rem; | 40px | copy |
| .-mt-11 | margin-top: -2.75rem; | 44px | copy |
| .-mr-11 | margin-right: -2.75rem; | 44px | copy |
| .-mb-11 | margin-bottom: -2.75rem; | 44px | copy |
| .-ml-11 | margin-left: -2.75rem; | 44px | copy |
| .-mt-12 | margin-top: -3rem; | 48px | copy |
| .-mr-12 | margin-right: -3rem; | 48px | copy |
| .-mb-12 | margin-bottom: -3rem; | 48px | copy |
| .-ml-12 | margin-left: -3rem; | 48px | copy |
| .-mt-14 | margin-top: -3.5rem; | 56px | copy |
| .-mr-14 | margin-right: -3.5rem; | 56px | copy |
| .-mb-14 | margin-bottom: -3.5rem; | 56px | copy |
| .-ml-14 | margin-left: -3.5rem; | 56px | copy |
| .-mt-16 | margin-top: -4rem; | 64px | copy |
| .-mr-16 | margin-right: -4rem; | 64px | copy |
| .-mb-16 | margin-bottom: -4rem; | 64px | copy |
| .-ml-16 | margin-left: -4rem; | 64px | copy |
| .-mt-20 | margin-top: -5rem; | 80px | copy |
| .-mr-20 | margin-right: -5rem; | 80px | copy |
| .-mb-20 | margin-bottom: -5rem; | 80px | copy |
| .-ml-20 | margin-left: -5rem; | 80px | copy |
| .-mt-24 | margin-top: -6rem; | 96px | copy |
| .-mr-24 | margin-right: -6rem; | 96px | copy |
| .-mb-24 | margin-bottom: -6rem; | 96px | copy |
| .-ml-24 | margin-left: -6rem; | 96px | copy |
| .-mt-28 | margin-top: -7rem; | 112px | copy |
| .-mr-28 | margin-right: -7rem; | 112px | copy |
| .-mb-28 | margin-bottom: -7rem; | 112px | copy |
| .-ml-28 | margin-left: -7rem; | 112px | copy |
| .-mt-32 | margin-top: -8rem; | 128px | copy |
| .-mr-32 | margin-right: -8rem; | 128px | copy |
| .-mb-32 | margin-bottom: -8rem; | 128px | copy |
| .-ml-32 | margin-left: -8rem; | 128px | copy |
| .-mt-36 | margin-top: -9rem; | 144px | copy |
| .-mr-36 | margin-right: -9rem; | 144px | copy |
| .-mb-36 | margin-bottom: -9rem; | 144px | copy |
| .-ml-36 | margin-left: -9rem; | 144px | copy |
| .-mt-40 | margin-top: -10rem; | 160px | copy |
| .-mr-40 | margin-right: -10rem; | 160px | copy |
| .-mb-40 | margin-bottom: -10rem; | 160px | copy |
| .-ml-40 | margin-left: -10rem; | 160px | copy |
| .-mt-44 | margin-top: -11rem; | 176px | copy |
| .-mr-44 | margin-right: -11rem; | 176px | copy |
| .-mb-44 | margin-bottom: -11rem; | 176px | copy |
| .-ml-44 | margin-left: -11rem; | 176px | copy |
| .-mt-48 | margin-top: -12rem; | 192px | copy |
| .-mr-48 | margin-right: -12rem; | 192px | copy |
| .-mb-48 | margin-bottom: -12rem; | 192px | copy |
| .-ml-48 | margin-left: -12rem; | 192px | copy |
| .-mt-52 | margin-top: -13rem; | 208px | copy |
| .-mr-52 | margin-right: -13rem; | 208px | copy |
| .-mb-52 | margin-bottom: -13rem; | 208px | copy |
| .-ml-52 | margin-left: -13rem; | 208px | copy |
| .-mt-56 | margin-top: -14rem; | 224px | copy |
| .-mr-56 | margin-right: -14rem; | 224px | copy |
| .-mb-56 | margin-bottom: -14rem; | 224px | copy |
| .-ml-56 | margin-left: -14rem; | 224px | copy |
| .-mt-60 | margin-top: 15rem; | 240px | copy |
| .-mr-60 | margin-right: 15rem; | 240px | copy |
| .-mb-60 | margin-bottom: 15rem; | 240px | copy |
| .-ml-60 | margin-left: 15rem; | 240px | copy |
| .-mt-64 | margin-top: -16rem; | 256px | copy |
| .-mr-64 | margin-right: -16rem; | 256px | copy |
| .-mb-64 | margin-bottom: -16rem; | 256px | copy |
| .-ml-64 | margin-left: -16rem; | 256px | copy |
| .-mt-72 | margin-top: -18rem; | 288px | copy |
| .-mr-72 | margin-right: -18rem; | 288px | copy |
| .-mb-72 | margin-bottom: -18rem; | 288px | copy |
| .-ml-72 | margin-left: -18rem; | 288px | copy |
| .-mt-80 | margin-top: -20rem; | 320px | copy |
| .-mr-80 | margin-right: -20rem; | 320px | copy |
| .-mb-80 | margin-bottom: -20rem; | 320px | copy |
| .-ml-80 | margin-left: -20rem; | 320px | copy |
| .-mt-96 | margin-top: -24rem; | 384px | copy |
| .-mr-96 | margin-right: -24rem; | 384px | copy |
| .-mb-96 | margin-bottom: -24rem; | 384px | copy |
| .-ml-96 | margin-left: -24rem; | 384px | copy |
| .-mt-px | margin-top: -1px; | copy | |
| .-mr-px | margin-right: -1px; | copy | |
| .-mb-px | margin-bottom: -1px; | copy | |
| .-ml-px | margin-left: -1px; | copy |
Control the space between child elements using margins. [view docs]
| .space-x-0 | margin-left: 0; | copy | |
| .space-x-0.5 | margin-left: 0.125rem; | copy | |
| .space-x-1 | margin-left: 0.25rem; | copy | |
| .space-x-1.5 | margin-left: 0.375rem; | copy | |
| .space-x-2 | margin-left: 0.5rem; | copy | |
| .space-x-2.5 | margin-left: 0.625rem; | copy | |
| .space-x-3 | margin-left: 0.75rem; | copy | |
| .space-x-3 | margin-left: 0.875rem; | copy | |
| .space-x-4 | margin-left: 1rem; | copy | |
| .space-x-5 | margin-left: 1.25rem; | copy | |
| .space-x-6 | margin-left: 1.5rem; | copy | |
| .space-x-7 | margin-left: 1.75rem; | copy | |
| .space-x-8 | margin-left: 2rem; | copy | |
| .space-x-9 | margin-left: 2.25rem; | copy | |
| .space-x-10 | margin-left: 2.5rem; | copy | |
| .space-x-11 | margin-left: 2.75rem; | copy | |
| .space-x-12 | margin-left: 3rem; | copy | |
| .space-x-14 | margin-left: 3.5rem; | copy | |
| .space-x-16 | margin-left: 4rem; | copy | |
| .space-x-20 | margin-left: 5rem; | copy | |
| .space-x-24 | margin-left: 6rem; | copy | |
| .space-x-28 | margin-left: 7rem; | copy | |
| .space-x-32 | margin-left: 8rem; | copy | |
| .space-x-36 | margin-left: 9rem; | copy | |
| .space-x-40 | margin-left: 10rem; | copy | |
| .space-x-44 | margin-left: 11rem; | copy | |
| .space-x-48 | margin-left: 12rem; | copy | |
| .space-x-52 | margin-left: 13rem; | copy | |
| .space-x-56 | margin-left: 14rem; | copy | |
| .space-x-60 | margin-left: 15rem; | copy | |
| .space-x-64 | margin-left: 16rem; | copy | |
| .space-x-72 | margin-left: 18rem; | copy | |
| .space-x-80 | margin-left: 20rem; | copy | |
| .space-x-96 | margin-left: 24rem; | copy | |
| .space-x-px | margin-left: 1px; | copy | |
| .-space-x-0 | margin-left: 0; | copy | |
| .-space-x-0.5 | margin-left: -0.125rem; | copy | |
| .-space-x-1 | margin-left: -0.25rem; | copy | |
| .-space-x-1.5 | margin-left: -0.375rem; | copy | |
| .-space-x-2 | margin-left: -0.5rem; | copy | |
| .-space-x-2.5 | margin-left: -0.625rem; | copy | |
| .-space-x-3 | margin-left: -0.75rem; | copy | |
| .-space-x-3 | margin-left: -0.875rem; | copy | |
| .-space-x-4 | margin-left: -1rem; | copy | |
| .-space-x-5 | margin-left: -1.25rem; | copy | |
| .-space-x-6 | margin-left: -1.5rem; | copy | |
| .-space-x-7 | margin-left: -1.75rem; | copy | |
| .-space-x-8 | margin-left: -2rem; | copy | |
| .-space-x-9 | margin-left: -2.25rem; | copy | |
| .-space-x-10 | margin-left: -2.5rem; | copy | |
| .-space-x-11 | margin-left: -2.75rem; | copy | |
| .-space-x-12 | margin-left: -3rem; | copy | |
| .-space-x-14 | margin-left: -3.5rem; | copy | |
| .-space-x-16 | margin-left: -4rem; | copy | |
| .-space-x-20 | margin-left: -5rem; | copy | |
| .-space-x-24 | margin-left: -6rem; | copy | |
| .-space-x-28 | margin-left: -7rem; | copy | |
| .-space-x-32 | margin-left: -8rem; | copy | |
| .-space-x-36 | margin-left: -9rem; | copy | |
| .-space-x-40 | margin-left: -10rem; | copy | |
| .-space-x-44 | margin-left: -11rem; | copy | |
| .-space-x-48 | margin-left: -12rem; | copy | |
| .-space-x-52 | margin-left: -13rem; | copy | |
| .-space-x-56 | margin-left: -14rem; | copy | |
| .-space-x-60 | margin-left: -15rem; | copy | |
| .-space-x-64 | margin-left: -16rem; | copy | |
| .-space-x-72 | margin-left: -18rem; | copy | |
| .-space-x-80 | margin-left: -20rem; | copy | |
| .-space-x-96 | margin-left: -24rem; | copy | |
| .-space-x-px | margin-left: -1px; | copy | |
| .space-y-0 | margin-top: 0; | copy | |
| .space-y-0.5 | margin-top: 0.125rem; | copy | |
| .space-y-1 | margin-top: 0.25rem; | copy | |
| .space-y-1.5 | margin-top: 0.375rem; | copy | |
| .space-y-2 | margin-top: 0.5rem; | copy | |
| .space-y-2.5 | margin-top: 0.625rem; | copy | |
| .space-y-3 | margin-top: 0.75rem; | copy | |
| .space-y-3 | margin-top: 0.875rem; | copy | |
| .space-y-4 | margin-top: 1rem; | copy | |
| .space-y-5 | margin-top: 1.25rem; | copy | |
| .space-y-6 | margin-top: 1.5rem; | copy | |
| .space-y-7 | margin-top: 1.75rem; | copy | |
| .space-y-8 | margin-top: 2rem; | copy | |
| .space-y-9 | margin-top: 2.25rem; | copy | |
| .space-y-10 | margin-top: 2.5rem; | copy | |
| .space-y-11 | margin-top: 2.75rem; | copy | |
| .space-y-12 | margin-top: 3rem; | copy | |
| .space-y-14 | margin-top: 3.5rem; | copy | |
| .space-y-16 | margin-top: 4rem; | copy | |
| .space-y-20 | margin-top: 5rem; | copy | |
| .space-y-24 | margin-top: 6rem; | copy | |
| .space-y-28 | margin-top: 7rem; | copy | |
| .space-y-32 | margin-top: 8rem; | copy | |
| .space-y-36 | margin-top: 9rem; | copy | |
| .space-y-40 | margin-top: 10rem; | copy | |
| .space-y-44 | margin-top: 11rem; | copy | |
| .space-y-48 | margin-top: 12rem; | copy | |
| .space-y-52 | margin-top: 13rem; | copy | |
| .space-y-56 | margin-top: 14rem; | copy | |
| .space-y-60 | margin-top: 15rem; | copy | |
| .space-y-64 | margin-top: 16rem; | copy | |
| .space-y-72 | margin-top: 18rem; | copy | |
| .space-y-80 | margin-top: 20rem; | copy | |
| .space-y-96 | margin-top: 24rem; | copy | |
| .space-y-px | margin-top: 1px; | copy | |
| .-space-y-0 | margin-top: 0; | copy | |
| .-space-y-0.5 | margin-top: -0.125rem; | copy | |
| .-space-y-1 | margin-top: -0.25rem; | copy | |
| .-space-y-1.5 | margin-top: -0.375rem; | copy | |
| .-space-y-2 | margin-top: -0.5rem; | copy | |
| .-space-y-2.5 | margin-top: -0.625rem; | copy | |
| .-space-y-3 | margin-top: -0.75rem; | copy | |
| .-space-y-3 | margin-top: -0.875rem; | copy | |
| .-space-y-4 | margin-top: -1rem; | copy | |
| .-space-y-5 | margin-top: -1.25rem; | copy | |
| .-space-y-6 | margin-top: -1.5rem; | copy | |
| .-space-y-7 | margin-top: -1.75rem; | copy | |
| .-space-y-8 | margin-top: -2rem; | copy | |
| .-space-y-9 | margin-top: -2.25rem; | copy | |
| .-space-y-10 | margin-top: -2.5rem; | copy | |
| .-space-y-11 | margin-top: -2.75rem; | copy | |
| .-space-y-12 | margin-top: -3rem; | copy | |
| .-space-y-14 | margin-top: -3.5rem; | copy | |
| .-space-y-16 | margin-top: -4rem; | copy | |
| .-space-y-20 | margin-top: -5rem; | copy | |
| .-space-y-24 | margin-top: -6rem; | copy | |
| .-space-y-28 | margin-top: -7rem; | copy | |
| .-space-y-32 | margin-top: -8rem; | copy | |
| .-space-y-36 | margin-top: -9rem; | copy | |
| .-space-y-40 | margin-top: -10rem; | copy | |
| .-space-y-44 | margin-top: -11rem; | copy | |
| .-space-y-48 | margin-top: -12rem; | copy | |
| .-space-y-52 | margin-top: -13rem; | copy | |
| .-space-y-56 | margin-top: -14rem; | copy | |
| .-space-y-60 | margin-top: -15rem; | copy | |
| .-space-y-64 | margin-top: -16rem; | copy | |
| .-space-y-72 | margin-top: -18rem; | copy | |
| .-space-y-80 | margin-top: -20rem; | copy | |
| .-space-y-96 | margin-top: -24rem; | copy | |
| .-space-y-px | margin-top: -1px; | copy | |
| .space-x-reverse | --space-x-reverse: 1 | copy | |
| .space-y-reverse | --space-y-reverse: 1 | copy |
Set whether a background image's position is fixed within the viewport, or scrolls with its containing block. [view docs]
| .bg-fixed | background-attachment: fixed; | copy | |
| .bg-local | background-attachment: local; | copy | |
| .bg-scroll | background-attachment: scroll; | copy |
Set whether an element's background extends underneath its border box, padding box, or content box. [view docs]
| .bg-clip-border | background-clip: border-box; | copy | |
| .bg-clip-padding | background-clip: padding-box; | copy | |
| .bg-clip-content | background-clip: content-box; | copy | |
| .bg-clip-text | background-clip: text; | copy |
Set the background color of an element. [view docs]
| .bg-transparent | background-color: transparent; | copy | ||
| .bg-current | background-color: currentColor; | copy | ||
| .bg-black | background-color: #000000; | copy | ||
| .bg-white | background-color: #ffffff; | copy | ||
| .bg-gray-50 | background-color: #F9FAFB; | copy | ||
| .bg-gray-100 | background-color: #F3F4F6; | copy | ||
| .bg-gray-200 | background-color: #E5E7EB; | copy | ||
| .bg-gray-300 | background-color: #D1D5DB; | copy | ||
| .bg-gray-400 | background-color: #9CA3AF; | copy | ||
| .bg-gray-500 | background-color: #6B7280; | copy | ||
| .bg-gray-600 | background-color: #6B7280; | copy | ||
| .bg-gray-700 | background-color: #374151; | copy | ||
| .bg-gray-800 | background-color: #1F2937; | copy | ||
| .bg-gray-900 | background-color: #111827; | copy | ||
| .bg-red-50 | background-color: #FEF2F2; | copy | ||
| .bg-red-100 | background-color: #FEE2E2; | copy | ||
| .bg-red-200 | background-color: #FECACA; | copy | ||
| .bg-red-300 | background-color: #FCA5A5; | copy | ||
| .bg-red-400 | background-color: #F87171; | copy | ||
| .bg-red-500 | background-color: #EF4444; | copy | ||
| .bg-red-600 | background-color: #DC2626; | copy | ||
| .bg-red-700 | background-color: #B91C1C; | copy | ||
| .bg-red-800 | background-color: #991B1B; | copy | ||
| .bg-red-900 | background-color: #7F1D1D; | copy | ||
| .bg-yellow-50 | background-color: #FFFBEB; | copy | ||
| .bg-yellow-100 | background-color: #FEF3C7; | copy | ||
| .bg-yellow-200 | background-color: #FDE68A; | copy | ||
| .bg-yellow-300 | background-color: #FCD34D; | copy | ||
| .bg-yellow-400 | background-color: #FBBF24; | copy | ||
| .bg-yellow-500 | background-color: #F59E0B; | copy | ||
| .bg-yellow-600 | background-color: #D97706; | copy | ||
| .bg-yellow-700 | background-color: #B45309; | copy | ||
| .bg-yellow-800 | background-color: #92400E; | copy | ||
| .bg-yellow-900 | background-color: #78350F; | copy | ||
| .bg-green-50 | background-color: #ECFDF5; | copy | ||
| .bg-green-100 | background-color: #D1FAE5; | copy | ||
| .bg-green-200 | background-color: #A7F3D0; | copy | ||
| .bg-green-300 | background-color: #6EE7B7; | copy | ||
| .bg-green-400 | background-color: #34D399; | copy | ||
| .bg-green-500 | background-color: #10B981; | copy | ||
| .bg-green-600 | background-color: #059669; | copy | ||
| .bg-green-700 | background-color: #047857; | copy | ||
| .bg-green-800 | background-color: #065F46; | copy | ||
| .bg-green-900 | background-color: #064E3B; | copy | ||
| .bg-blue-50 | background-color: #EFF6FF; | copy | ||
| .bg-blue-100 | background-color: #DBEAFE; | copy | ||
| .bg-blue-200 | background-color: #BFDBFE; | copy | ||
| .bg-blue-300 | background-color: #93C5FD; | copy | ||
| .bg-blue-400 | background-color: #60A5FA; | copy | ||
| .bg-blue-500 | background-color: #3B82F6; | copy | ||
| .bg-blue-600 | background-color: #2563EB; | copy | ||
| .bg-blue-700 | background-color: #1D4ED8; | copy | ||
| .bg-blue-800 | background-color: #1E40AF; | copy | ||
| .bg-blue-900 | background-color: #1E3A8A; | copy | ||
| .bg-indigo-50 | background-color: #EEF2FF; | copy | ||
| .bg-indigo-100 | background-color: #E0E7FF; | copy | ||
| .bg-indigo-200 | background-color: #C7D2FE; | copy | ||
| .bg-indigo-300 | background-color: #A5B4FC; | copy | ||
| .bg-indigo-400 | background-color: #818CF8; | copy | ||
| .bg-indigo-500 | background-color: #6366F1; | copy | ||
| .bg-indigo-600 | background-color: #4F46E5; | copy | ||
| .bg-indigo-700 | background-color: #4338CA; | copy | ||
| .bg-indigo-800 | background-color: #3730A3; | copy | ||
| .bg-indigo-900 | background-color: #312E81; | copy | ||
| .bg-purple-50 | background-color: #F5F3FF; | copy | ||
| .bg-purple-100 | background-color: #EDE9FE; | copy | ||
| .bg-purple-200 | background-color: #DDD6FE; | copy | ||
| .bg-purple-300 | background-color: #C4B5FD; | copy | ||
| .bg-purple-400 | background-color: #A78BFA; | copy | ||
| .bg-purple-500 | background-color: #8B5CF6; | copy | ||
| .bg-purple-600 | background-color: #7C3AED; | copy | ||
| .bg-purple-700 | background-color: #6D28D9; | copy | ||
| .bg-purple-800 | background-color: #5B21B6; | copy | ||
| .bg-purple-900 | background-color: #4C1D95; | copy | ||
| .bg-pink-50 | background-color: #FDF2F8; | copy | ||
| .bg-pink-100 | background-color: #FCE7F3; | copy | ||
| .bg-pink-200 | background-color: #FBCFE8; | copy | ||
| .bg-pink-300 | background-color: #F9A8D4; | copy | ||
| .bg-pink-400 | background-color: #F472B6; | copy | ||
| .bg-pink-500 | background-color: #EC4899; | copy | ||
| .bg-pink-600 | background-color: #DB2777; | copy | ||
| .bg-pink-700 | background-color: #BE185D; | copy | ||
| .bg-pink-800 | background-color: #9D174D; | copy | ||
| .bg-pink-900 | background-color: #831843; | copy |
Set the opacity of the background of an element. [view docs]
| .bg-opacity-0 | --bg-opacity: 0; | copy | |
| .bg-opacity-5 | --bg-opacity: 0.5; | copy | |
| .bg-opacity-10 | --bg-opacity: 0.1; | copy | |
| .bg-opacity-20 | --bg-opacity: 0.2; | copy | |
| .bg-opacity-25 | --bg-opacity: 0.25; | copy | |
| .bg-opacity-30 | --bg-opacity: 0.3; | copy | |
| .bg-opacity-40 | --bg-opacity: 0.4; | copy | |
| .bg-opacity-50 | --bg-opacity: 0.5; | copy | |
| .bg-opacity-60 | --bg-opacity: 0.6; | copy | |
| .bg-opacity-70 | --bg-opacity: 0.7; | copy | |
| .bg-opacity-75 | --bg-opacity: 0.75; | copy | |
| .bg-opacity-80 | --bg-opacity: 0.8; | copy | |
| .bg-opacity-90 | --bg-opacity: 0.9; | copy | |
| .bg-opacity-95 | --bg-opacity: 0.95; | copy | |
| .bg-opacity-100 | --bg-opacity: 1; | copy |
Set the background's origin: from the border start, inside the border, or inside the padding. [view docs]
| .bg-origin-border | background-origin: border-box; | copy | |
| .bg-origin-padding | background-origin: padding-box; | copy | |
| .bg-origin-content | background-origin: content-box; | copy |
Set the initial position for each background image. [view docs]
| .bg-bottom | background-position: bottom; | copy | |
| .bg-center | background-position: center; | copy | |
| .bg-left | background-position: left; | copy | |
| .bg-left-bottom | background-position: left bottom; | copy | |
| .bg-left-top | background-position: left top; | copy | |
| .bg-right | background-position: right; | copy | |
| .bg-right-bottom | background-position: right bottom; | copy | |
| .bg-right-top | background-position: right top; | copy | |
| .bg-top | background-position: top; | copy |
Set how background images are repeated. [view docs]
| .bg-repeat | background-repeat: repeat; | copy | |
| .bg-no-repeat | background-repeat: no-repeat; | copy | |
| .bg-repeat-x | background-repeat: repeat-x; | copy | |
| .bg-repeat-y | background-repeat: repeat-y; | copy | |
| .bg-repeat-round | background-repeat: round; | copy | |
| .bg-repeat-space | background-repeat: space; | copy |
Set the size of the element's background image. [view docs]
| .bg-auto | background-size: auto; | copy | |
| .bg-cover | background-size: cover; | copy | |
| .bg-contain | background-size: contain; | copy |
Set one or more background images on an element. [view docs]
| .bg-none | background-image: none; | copy | |
| .bg-gradient-to-t | background-image:background-image: background-image: linear-gradient(to top, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-tr | background-image: background-image: linear-gradient(to top right, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-r | background-image: background-image: linear-gradient(to right, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-br | background-image: background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-b | background-image: background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-bl | background-image: background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-l | background-image: background-image: linear-gradient(to left, var(--tw-gradient-stops)); | copy | |
| .bg-gradient-to-tl | background-image: background-image: linear-gradient(to top left, var(--tw-gradient-stops)); | copy |
Control the color stops in background gradients. [view docs]
| .from-transparent | background-color: transparent; | copy | ||
| .from-current | background-color: currentColor; | copy | ||
| .from-black | background-color: #000000; | copy | ||
| .from-white | background-color: #ffffff; | copy | ||
| .from-gray-50 | background-color: #F9FAFB; | copy | ||
| .from-gray-100 | background-color: #F3F4F6; | copy | ||
| .from-gray-200 | background-color: #E5E7EB; | copy | ||
| .from-gray-300 | background-color: #D1D5DB; | copy | ||
| .from-gray-400 | background-color: #9CA3AF; | copy | ||
| .from-gray-500 | background-color: #6B7280; | copy | ||
| .from-gray-600 | background-color: #6B7280; | copy | ||
| .from-gray-700 | background-color: #374151; | copy | ||
| .from-gray-800 | background-color: #1F2937; | copy | ||
| .from-gray-900 | background-color: #111827; | copy | ||
| .from-red-50 | background-color: #FEF2F2; | copy | ||
| .from-red-100 | background-color: #FEE2E2; | copy | ||
| .from-red-200 | background-color: #FECACA; | copy | ||
| .from-red-300 | background-color: #FCA5A5; | copy | ||
| .from-red-400 | background-color: #F87171; | copy | ||
| .from-red-500 | background-color: #EF4444; | copy | ||
| .from-red-600 | background-color: #DC2626; | copy | ||
| .from-red-700 | background-color: #B91C1C; | copy | ||
| .from-red-800 | background-color: #991B1B; | copy | ||
| .from-red-900 | background-color: #7F1D1D; | copy | ||
| .from-yellow-50 | background-color: #FFFBEB; | copy | ||
| .from-yellow-100 | background-color: #FEF3C7; | copy | ||
| .from-yellow-200 | background-color: #FDE68A; | copy | ||
| .from-yellow-300 | background-color: #FCD34D; | copy | ||
| .from-yellow-400 | background-color: #FBBF24; | copy | ||
| .from-yellow-500 | background-color: #F59E0B; | copy | ||
| .from-yellow-600 | background-color: #D97706; | copy | ||
| .from-yellow-700 | background-color: #B45309; | copy | ||
| .from-yellow-800 | background-color: #92400E; | copy | ||
| .from-yellow-900 | background-color: #78350F; | copy | ||
| .from-green-50 | background-color: #ECFDF5; | copy | ||
| .from-green-100 | background-color: #D1FAE5; | copy | ||
| .from-green-200 | background-color: #A7F3D0; | copy | ||
| .from-green-300 | background-color: #6EE7B7; | copy | ||
| .from-green-400 | background-color: #34D399; | copy | ||
| .from-green-500 | background-color: #10B981; | copy | ||
| .from-green-600 | background-color: #059669; | copy | ||
| .from-green-700 | background-color: #047857; | copy | ||
| .from-green-800 | background-color: #065F46; | copy | ||
| .from-green-900 | background-color: #064E3B; | copy | ||
| .from-blue-50 | background-color: #EFF6FF; | copy | ||
| .from-blue-100 | background-color: #DBEAFE; | copy | ||
| .from-blue-200 | background-color: #BFDBFE; | copy | ||
| .from-blue-300 | background-color: #93C5FD; | copy | ||
| .from-blue-400 | background-color: #60A5FA; | copy | ||
| .from-blue-500 | background-color: #3B82F6; | copy | ||
| .from-blue-600 | background-color: #2563EB; | copy | ||
| .from-blue-700 | background-color: #1D4ED8; | copy | ||
| .from-blue-800 | background-color: #1E40AF; | copy | ||
| .from-blue-900 | background-color: #1E3A8A; | copy | ||
| .from-indigo-50 | background-color: #EEF2FF; | copy | ||
| .from-indigo-100 | background-color: #E0E7FF; | copy | ||
| .from-indigo-200 | background-color: #C7D2FE; | copy | ||
| .from-indigo-300 | background-color: #A5B4FC; | copy | ||
| .from-indigo-400 | background-color: #818CF8; | copy | ||
| .from-indigo-500 | background-color: #6366F1; | copy | ||
| .from-indigo-600 | background-color: #4F46E5; | copy | ||
| .from-indigo-700 | background-color: #4338CA; | copy | ||
| .from-indigo-800 | background-color: #3730A3; | copy | ||
| .from-indigo-900 | background-color: #312E81; | copy | ||
| .from-purple-50 | background-color: #F5F3FF; | copy | ||
| .from-purple-100 | background-color: #EDE9FE; | copy | ||
| .from-purple-200 | background-color: #DDD6FE; | copy | ||
| .from-purple-300 | background-color: #C4B5FD; | copy | ||
| .from-purple-400 | background-color: #A78BFA; | copy | ||
| .from-purple-500 | background-color: #8B5CF6; | copy | ||
| .from-purple-600 | background-color: #7C3AED; | copy | ||
| .from-purple-700 | background-color: #6D28D9; | copy | ||
| .from-purple-800 | background-color: #5B21B6; | copy | ||
| .from-purple-900 | background-color: #4C1D95; | copy | ||
| .from-pink-50 | background-color: #FDF2F8; | copy | ||
| .from-pink-100 | background-color: #FCE7F3; | copy | ||
| .from-pink-200 | background-color: #FBCFE8; | copy | ||
| .from-pink-300 | background-color: #F9A8D4; | copy | ||
| .from-pink-400 | background-color: #F472B6; | copy | ||
| .from-pink-500 | background-color: #EC4899; | copy | ||
| .from-pink-600 | background-color: #DB2777; | copy | ||
| .from-pink-700 | background-color: #BE185D; | copy | ||
| .from-pink-800 | background-color: #9D174D; | copy | ||
| .from-pink-900 | background-color: #831843; | copy | ||
| .via-transparent | background-color: transparent; | copy | ||
| .via-current | background-color: currentColor; | copy | ||
| .via-black | background-color: #000000; | copy | ||
| .via-white | background-color: #ffffff; | copy | ||
| .via-gray-50 | background-color: #F9FAFB; | copy | ||
| .via-gray-100 | background-color: #F3F4F6; | copy | ||
| .via-gray-200 | background-color: #E5E7EB; | copy | ||
| .via-gray-300 | background-color: #D1D5DB; | copy | ||
| .via-gray-400 | background-color: #9CA3AF; | copy | ||
| .via-gray-500 | background-color: #6B7280; | copy | ||
| .via-gray-600 | background-color: #6B7280; | copy | ||
| .via-gray-700 | background-color: #374151; | copy | ||
| .via-gray-800 | background-color: #1F2937; | copy | ||
| .via-gray-900 | background-color: #111827; | copy | ||
| .via-red-50 | background-color: #FEF2F2; | copy | ||
| .via-red-100 | background-color: #FEE2E2; | copy | ||
| .via-red-200 | background-color: #FECACA; | copy | ||
| .via-red-300 | background-color: #FCA5A5; | copy | ||
| .via-red-400 | background-color: #F87171; | copy | ||
| .via-red-500 | background-color: #EF4444; | copy | ||
| .via-red-600 | background-color: #DC2626; | copy | ||
| .via-red-700 | background-color: #B91C1C; | copy | ||
| .via-red-800 | background-color: #991B1B; | copy | ||
| .via-red-900 | background-color: #7F1D1D; | copy | ||
| .via-yellow-50 | background-color: #FFFBEB; | copy | ||
| .via-yellow-100 | background-color: #FEF3C7; | copy | ||
| .via-yellow-200 | background-color: #FDE68A; | copy | ||
| .via-yellow-300 | background-color: #FCD34D; | copy | ||
| .via-yellow-400 | background-color: #FBBF24; | copy | ||
| .via-yellow-500 | background-color: #F59E0B; | copy | ||
| .via-yellow-600 | background-color: #D97706; | copy | ||
| .via-yellow-700 | background-color: #B45309; | copy | ||
| .via-yellow-800 | background-color: #92400E; | copy | ||
| .via-yellow-900 | background-color: #78350F; | copy | ||
| .via-green-50 | background-color: #ECFDF5; | copy | ||
| .via-green-100 | background-color: #D1FAE5; | copy | ||
| .via-green-200 | background-color: #A7F3D0; | copy | ||
| .via-green-300 | background-color: #6EE7B7; | copy | ||
| .via-green-400 | background-color: #34D399; | copy | ||
| .via-green-500 | background-color: #10B981; | copy | ||
| .via-green-600 | background-color: #059669; | copy | ||
| .via-green-700 | background-color: #047857; | copy | ||
| .via-green-800 | background-color: #065F46; | copy | ||
| .via-green-900 | background-color: #064E3B; | copy | ||
| .via-blue-50 | background-color: #EFF6FF; | copy | ||
| .via-blue-100 | background-color: #DBEAFE; | copy | ||
| .via-blue-200 | background-color: #BFDBFE; | copy | ||
| .via-blue-300 | background-color: #93C5FD; | copy | ||
| .via-blue-400 | background-color: #60A5FA; | copy | ||
| .via-blue-500 | background-color: #3B82F6; | copy | ||
| .via-blue-600 | background-color: #2563EB; | copy | ||
| .via-blue-700 | background-color: #1D4ED8; | copy | ||
| .via-blue-800 | background-color: #1E40AF; | copy | ||
| .via-blue-900 | background-color: #1E3A8A; | copy | ||
| .via-indigo-50 | background-color: #EEF2FF; | copy | ||
| .via-indigo-100 | background-color: #E0E7FF; | copy | ||
| .via-indigo-200 | background-color: #C7D2FE; | copy | ||
| .via-indigo-300 | background-color: #A5B4FC; | copy | ||
| .via-indigo-400 | background-color: #818CF8; | copy | ||
| .via-indigo-500 | background-color: #6366F1; | copy | ||
| .via-indigo-600 | background-color: #4F46E5; | copy | ||
| .via-indigo-700 | background-color: #4338CA; | copy | ||
| .via-indigo-800 | background-color: #3730A3; | copy | ||
| .via-indigo-900 | background-color: #312E81; | copy | ||
| .via-purple-50 | background-color: #F5F3FF; | copy | ||
| .via-purple-100 | background-color: #EDE9FE; | copy | ||
| .via-purple-200 | background-color: #DDD6FE; | copy | ||
| .via-purple-300 | background-color: #C4B5FD; | copy | ||
| .via-purple-400 | background-color: #A78BFA; | copy | ||
| .via-purple-500 | background-color: #8B5CF6; | copy | ||
| .via-purple-600 | background-color: #7C3AED; | copy | ||
| .via-purple-700 | background-color: #6D28D9; | copy | ||
| .via-purple-800 | background-color: #5B21B6; | copy | ||
| .via-purple-900 | background-color: #4C1D95; | copy | ||
| .via-pink-50 | background-color: #FDF2F8; | copy | ||
| .via-pink-100 | background-color: #FCE7F3; | copy | ||
| .via-pink-200 | background-color: #FBCFE8; | copy | ||
| .via-pink-300 | background-color: #F9A8D4; | copy | ||
| .via-pink-400 | background-color: #F472B6; | copy | ||
| .via-pink-500 | background-color: #EC4899; | copy | ||
| .via-pink-600 | background-color: #DB2777; | copy | ||
| .via-pink-700 | background-color: #BE185D; | copy | ||
| .via-pink-800 | background-color: #9D174D; | copy | ||
| .via-pink-900 | background-color: #831843; | copy | ||
| .to-transparent | background-color: transparent; | copy | ||
| .to-current | background-color: currentColor; | copy | ||
| .to-black | background-color: #000000; | copy | ||
| .to-white | background-color: #ffffff; | copy | ||
| .to-gray-50 | background-color: #F9FAFB; | copy | ||
| .to-gray-100 | background-color: #F3F4F6; | copy | ||
| .to-gray-200 | background-color: #E5E7EB; | copy | ||
| .to-gray-300 | background-color: #D1D5DB; | copy | ||
| .to-gray-400 | background-color: #9CA3AF; | copy | ||
| .to-gray-500 | background-color: #6B7280; | copy | ||
| .to-gray-600 | background-color: #6B7280; | copy | ||
| .to-gray-700 | background-color: #374151; | copy | ||
| .to-gray-800 | background-color: #1F2937; | copy | ||
| .to-gray-900 | background-color: #111827; | copy | ||
| .to-red-50 | background-color: #FEF2F2; | copy | ||
| .to-red-100 | background-color: #FEE2E2; | copy | ||
| .to-red-200 | background-color: #FECACA; | copy | ||
| .to-red-300 | background-color: #FCA5A5; | copy | ||
| .to-red-400 | background-color: #F87171; | copy | ||
| .to-red-500 | background-color: #EF4444; | copy | ||
| .to-red-600 | background-color: #DC2626; | copy | ||
| .to-red-700 | background-color: #B91C1C; | copy | ||
| .to-red-800 | background-color: #991B1B; | copy | ||
| .to-red-900 | background-color: #7F1D1D; | copy | ||
| .to-yellow-50 | background-color: #FFFBEB; | copy | ||
| .to-yellow-100 | background-color: #FEF3C7; | copy | ||
| .to-yellow-200 | background-color: #FDE68A; | copy | ||
| .to-yellow-300 | background-color: #FCD34D; | copy | ||
| .to-yellow-400 | background-color: #FBBF24; | copy | ||
| .to-yellow-500 | background-color: #F59E0B; | copy | ||
| .to-yellow-600 | background-color: #D97706; | copy | ||
| .to-yellow-700 | background-color: #B45309; | copy | ||
| .to-yellow-800 | background-color: #92400E; | copy | ||
| .to-yellow-900 | background-color: #78350F; | copy | ||
| .to-green-50 | background-color: #ECFDF5; | copy | ||
| .to-green-100 | background-color: #D1FAE5; | copy | ||
| .to-green-200 | background-color: #A7F3D0; | copy | ||
| .to-green-300 | background-color: #6EE7B7; | copy | ||
| .to-green-400 | background-color: #34D399; | copy | ||
| .to-green-500 | background-color: #10B981; | copy | ||
| .to-green-600 | background-color: #059669; | copy | ||
| .to-green-700 | background-color: #047857; | copy | ||
| .to-green-800 | background-color: #065F46; | copy | ||
| .to-green-900 | background-color: #064E3B; | copy | ||
| .to-blue-50 | background-color: #EFF6FF; | copy | ||
| .to-blue-100 | background-color: #DBEAFE; | copy | ||
| .to-blue-200 | background-color: #BFDBFE; | copy | ||
| .to-blue-300 | background-color: #93C5FD; | copy | ||
| .to-blue-400 | background-color: #60A5FA; | copy | ||
| .to-blue-500 | background-color: #3B82F6; | copy | ||
| .to-blue-600 | background-color: #2563EB; | copy | ||
| .to-blue-700 | background-color: #1D4ED8; | copy | ||
| .to-blue-800 | background-color: #1E40AF; | copy | ||
| .to-blue-900 | background-color: #1E3A8A; | copy | ||
| .to-indigo-50 | background-color: #EEF2FF; | copy | ||
| .to-indigo-100 | background-color: #E0E7FF; | copy | ||
| .to-indigo-200 | background-color: #C7D2FE; | copy | ||
| .to-indigo-300 | background-color: #A5B4FC; | copy | ||
| .to-indigo-400 | background-color: #818CF8; | copy | ||
| .to-indigo-500 | background-color: #6366F1; | copy | ||
| .to-indigo-600 | background-color: #4F46E5; | copy | ||
| .to-indigo-700 | background-color: #4338CA; | copy | ||
| .to-indigo-800 | background-color: #3730A3; | copy | ||
| .to-indigo-900 | background-color: #312E81; | copy | ||
| .to-purple-50 | background-color: #F5F3FF; | copy | ||
| .to-purple-100 | background-color: #EDE9FE; | copy | ||
| .to-purple-200 | background-color: #DDD6FE; | copy | ||
| .to-purple-300 | background-color: #C4B5FD; | copy | ||
| .to-purple-400 | background-color: #A78BFA; | copy | ||
| .to-purple-500 | background-color: #8B5CF6; | copy | ||
| .to-purple-600 | background-color: #7C3AED; | copy | ||
| .to-purple-700 | background-color: #6D28D9; | copy | ||
| .to-purple-800 | background-color: #5B21B6; | copy | ||
| .to-purple-900 | background-color: #4C1D95; | copy | ||
| .to-pink-50 | background-color: #FDF2F8; | copy | ||
| .to-pink-100 | background-color: #FCE7F3; | copy | ||
| .to-pink-200 | background-color: #FBCFE8; | copy | ||
| .to-pink-300 | background-color: #F9A8D4; | copy | ||
| .to-pink-400 | background-color: #F472B6; | copy | ||
| .to-pink-500 | background-color: #EC4899; | copy | ||
| .to-pink-600 | background-color: #DB2777; | copy | ||
| .to-pink-700 | background-color: #BE185D; | copy | ||
| .to-pink-800 | background-color: #9D174D; | copy | ||
| .to-pink-900 | background-color: #831843; | copy |
Apply graphical effects like blur or color shift to an element. [view docs]
| .filter | filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | copy | |
| .filter-none | filter: none; | copy |
Apply Gaussian blur to an element. [view docs]
| .blur-none | --tw-blur: blur(0); | copy | |
| .blur-sm | --tw-blur: blur(4px); | copy | |
| .blur | --tw-blur: blur(8px); | copy | |
| .blur-md | --tw-blur: blur(12px); | copy | |
| .blur-lg | --tw-blur: blur(16px); | copy | |
| .blur-xl | --tw-blur: blur(24px); | copy | |
| .blur-2xl | --tw-blur: blur(40px); | copy | |
| .blur-3xl | --tw-blur: blur(64px); | copy |
Apply a linear multiplier to an element, making it appear brighter or darker. [view docs]
| .brightness-0 | brightness: brightness(0); | copy | |
| .brightness-50 | brightness: brightness(.5); | copy | |
| .brightness-75 | brightness: brightness(.75); | copy | |
| .brightness-90 | brightness: brightness(.9); | copy | |
| .brightness-95 | brightness: brightness(.95); | copy | |
| .brightness-100 | brightness: brightness(1); | copy | |
| .brightness-105 | brightness: brightness(1.05); | copy | |
| .brightness-110 | brightness: brightness(1.1); | copy | |
| .brightness-125 | brightness: brightness(1.25); | copy | |
| .brightness-150 | brightness: brightness(1.5); | copy | |
| .brightness-200 | brightness: brightness(2); | copy |
Adjust the contrast of an element. [view docs]
| .contrast-0 | contrast: contrast(0); | copy | |
| .contrast-50 | contrast: contrast(.5); | copy | |
| .contrast-75 | contrast: contrast(.75); | copy | |
| .contrast-100 | contrast: contrast(1); | copy | |
| .contrast-125 | contrast: contrast(1.25); | copy | |
| .contrast-150 | contrast: contrast(1.5); | copy | |
| .contrast-200 | contrast: contrast(2); | copy |
Apply a drop shadow effect to an element. [view docs]
| .drop-shadow-sm | copy | ||
| .drop-shadow | copy | ||
| .drop-shadow-md | copy | ||
| .drop-shadow-lg | copy | ||
| .drop-shadow-xl | copy | ||
| .drop-shadow-2xl | copy | ||
| .drop-shadow-none | drop-shadow: drop-shadow: drop-shadow(0 0 #0000); | copy |
Apply the grayscale styles to an element. [view docs]
| .grayscale-0 | grayscale: grayscale(0); | copy | |
| .grayscale | grayscale: grayscale(1); | copy |
Rotate the hue of an element and its contents. [view docs]
| .-hue-rotate-180 | hue-rotate: hue-rotate(-180deg); | copy | |
| .-hue-rotate-90 | hue-rotate: hue-rotate(-90deg); | copy | |
| .-hue-rotate-60 | hue-rotate: hue-rotate(-60deg); | copy | |
| .-hue-rotate-30 | hue-rotate: hue-rotate(-30deg); | copy | |
| .-hue-rotate-15 | hue-rotate: hue-rotate(-15deg); | copy | |
| .hue-rotate-0 | hue-rotate: hue-rotate(0deg); | copy | |
| .hue-rotate-15 | hue-rotate: hue-rotate(15deg); | copy | |
| .hue-rotate-30 | hue-rotate: hue-rotate(30deg); | copy | |
| .hue-rotate-60 | hue-rotate: hue-rotate(60deg); | copy | |
| .hue-rotate-90 | hue-rotate: hue-rotate(90deg); | copy | |
| .hue-rotate-180 | hue-rotate: hue-rotate(180deg); | copy |
Invert the color samples for an element. [view docs]
| .invert-0 | invert: invert(0); | copy | |
| .invert | invert: invert(1); | copy |
Super-saturate or desaturate an element. [view docs]
| .saturate-0 | saturate: saturate(0); | copy | |
| .saturate-50 | saturate: saturate(.5); | copy | |
| .saturate-100 | saturate: saturate(1); | copy | |
| .saturate-150 | saturate: saturate(1.50); | copy | |
| .saturate-200 | saturate: saturate(2); | copy |
Convert an element to sepia, giving it a warmer, more yellow/brown appearance. [view docs]
| .sepia-0 | sepia: sepia(0); | copy | |
| .sepia | sepia: sepia(1); | copy |
Apply graphical effects such as blurring or color shifting to the area behind an element. [view docs]
| .backdrop-filter | backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); | copy | |
| .backdrop-filter-none | backdrop-filter: none; | copy |
Apply the backdrop blur filter to an element. [view docs]
| .backdrop-blur-0 | backdrop-blur: blur(0); | copy | |
| .backdrop-blur-sm | backdrop-blur: blur(4px); | copy | |
| .backdrop-blur | backdrop-blur: blur(8px); | copy | |
| .backdrop-blur-md | backdrop-blur: blur(12px); | copy | |
| .backdrop-blur-lg | backdrop-blur: blur(16px); | copy | |
| .backdrop-blur-xl | backdrop-blur: blur(24px); | copy | |
| .backdrop-blur-2xl | backdrop-blur: blur(40px); | copy | |
| .backdrop-blur-3xl | backdrop-blur: blur(64px); | copy |
Apply the backdrop brightness to an element. [view docs]
| .backdrop-brightness-0 | backdrop-brightness: brightness(0); | copy | |
| .backdrop-brightness-sm | backdrop-brightness: brightness(4px); | copy | |
| .backdrop-brightness | backdrop-brightness: brightness(8px); | copy | |
| .backdrop-brightness-md | backdrop-brightness: brightness(12px); | copy | |
| .backdrop-brightness-lg | backdrop-brightness: brightness(16px); | copy | |
| .backdrop-brightness-xl | backdrop-brightness: brightness(24px); | copy | |
| .backdrop-brightness-2xl | backdrop-brightness: brightness(40px); | copy | |
| .backdrop-brightness-3xl | backdrop-brightness: brightness(64px); | copy |
Apply the backdrop contrast to an element. [view docs]
| .backdrop-contrast-0 | backdrop-contrast: contrast(0); | copy | |
| .backdrop-contrast-50 | backdrop-contrast: contrast(.5); | copy | |
| .backdrop-contrast-75 | backdrop-contrast: contrast(.75); | copy | |
| .backdrop-contrast-100 | backdrop-contrast: contrast(1); | copy | |
| .backdrop-contrast-125 | backdrop-contrast: contrast(1.25); | copy | |
| .backdrop-contrast-150 | backdrop-contrast: contrast(1.5); | copy | |
| .backdrop-contrast-200 | backdrop-contrast: contrast(2); | copy |
Apply the backdrop grayscale to an element. [view docs]
| .backdrop-grayscale-0 | backdrop-grayscale: grayscale(0); | copy | |
| .backdrop-grayscale | backdrop-grayscale: grayscale(1); | copy |
Apply the backdrop hue rotate to an element. [view docs]
| .-backdrop-hue-rotate-180 | backdrop-hue-rotate: hue-rotate(-180deg); | copy | |
| .-backdrop-hue-rotate-90 | backdrop-hue-rotate: hue-rotate(-90deg); | copy | |
| .-backdrop-hue-rotate-60 | backdrop-hue-rotate: hue-rotate(-60deg); | copy | |
| .-backdrop-hue-rotate-30 | backdrop-hue-rotate: hue-rotate(-30deg); | copy | |
| .-backdrop-hue-rotate-15 | backdrop-hue-rotate: hue-rotate(-15deg); | copy | |
| .backdrop-hue-rotate-0 | backdrop-hue-rotate: hue-rotate(0deg); | copy | |
| .backdrop-hue-rotate-15 | backdrop-hue-rotate: hue-rotate(15deg); | copy | |
| .backdrop-hue-rotate-30 | backdrop-hue-rotate: hue-rotate(30deg); | copy | |
| .backdrop-hue-rotate-60 | backdrop-hue-rotate: hue-rotate(60deg); | copy | |
| .backdrop-hue-rotate-90 | backdrop-hue-rotate: hue-rotate(90deg); | copy | |
| .backdrop-hue-rotate-180 | backdrop-hue-rotate: hue-rotate(180deg); | copy |
Apply the backdrop invert to an element. [view docs]
| .backdrop-invert-0 | backdrop-invert: invert(0); | copy | |
| .backdrop-invert | backdrop-invert: invert(1); | copy |
Apply the backdrop opacity to an element. [view docs]
| .backdrop-opacity-0 | backdrop-opacity: opacity(0); | copy | |
| .backdrop-opacity-5 | backdrop-opacity: opacity(0.05); | copy | |
| .backdrop-opacity-10 | backdrop-opacity: opacity(0.1); | copy | |
| .backdrop-opacity-20 | backdrop-opacity: opacity(0.2); | copy | |
| .backdrop-opacity-25 | backdrop-opacity: opacity(0.25); | copy | |
| .backdrop-opacity-30 | backdrop-opacity: opacity(0.3); | copy | |
| .backdrop-opacity-40 | backdrop-opacity: opacity(0.4); | copy | |
| .backdrop-opacity-50 | backdrop-opacity: opacity(0.5); | copy | |
| .backdrop-opacity-60 | backdrop-opacity: opacity(0.6); | copy | |
| .backdrop-opacity-70 | backdrop-opacity: opacity(0.7); | copy | |
| .backdrop-opacity-75 | backdrop-opacity: opacity(0.75); | copy | |
| .backdrop-opacity-80 | backdrop-opacity: opacity(0.8); | copy | |
| .backdrop-opacity-90 | backdrop-opacity: opacity(0.9); | copy | |
| .backdrop-opacity-95 | backdrop-opacity: opacity(0.95); | copy | |
| .backdrop-opacity-100 | backdrop-opacity: opacity(1); | copy |
Apply the backdrop saturate to an element. [view docs]
| .backdrop-saturate-0 | backdrop-saturate: saturate(0); | copy | |
| .backdrop-saturate-50 | backdrop-saturate: saturate(.5); | copy | |
| .backdrop-saturate-100 | backdrop-saturate: saturate(1); | copy | |
| .backdrop-saturate-150 | backdrop-saturate: saturate(1.50); | copy | |
| .backdrop-saturate-200 | backdrop-saturate: saturate(2); | copy |
Apply the backdrop sepia to an element. [view docs]
| .backdrop-sepia-0 | backdrop-sepia: sepia(0); | copy | |
| .backdrop-sepia | backdrop-sepia: sepia(1); | copy |
Set the origin for an element's transformations. [view docs]
| .origin-center | transform-origin: center; | copy | |
| .origin-top | transform-origin: top; | copy | |
| .origin-top-right | transform-origin: top right; | copy | |
| .origin-right | transform-origin: right; | copy | |
| .origin-bottom-right | transform-origin: bottom right; | copy | |
| .origin-bottom | transform-origin: bottom; | copy | |
| .origin-bottom-left | transform-origin: bottom left; | copy | |
| .origin-left | transform-origin: left; | copy | |
| .origin-top-left | transform-origin: top left; | copy |
Define a transformation that resizes an element on the 2D plane. [view docs]
| .scale-0 | --transform-scale-x: 0; --transform-scale-y: 0; | copy | |
| .scale-50 | --transform-scale-x: .5; --transform-scale-y: .5; | copy | |
| .scale-75 | --transform-scale-x: .75; --transform-scale-y: .75; | copy | |
| .scale-90 | --transform-scale-x: .9; --transform-scale-y: .9; | copy | |
| .scale-95 | --transform-scale-x: .95; --transform-scale-y: .95; | copy | |
| .scale-100 | --transform-scale-x: 1; --transform-scale-y: 1; | copy | |
| .scale-105 | --transform-scale-x: 1.05; --transform-scale-y: 1.05; | copy | |
| .scale-110 | --transform-scale-x: 1.1; --transform-scale-y: 1.1; | copy | |
| .scale-125 | --transform-scale-x: 1.25; --transform-scale-y: 1.25; | copy | |
| .scale-150 | --transform-scale-x: 1.5; --transform-scale-y: 1.5; | copy | |
| .scale-x-0 | --transform-scale-x: 0; | copy | |
| .scale-x-50 | --transform-scale-x: .5; | copy | |
| .scale-x-75 | --transform-scale-x: .75; | copy | |
| .scale-x-90 | --transform-scale-x: .9; | copy | |
| .scale-x-95 | --transform-scale-x: .95; | copy | |
| .scale-x-100 | --transform-scale-x: 1; | copy | |
| .scale-x-105 | --transform-scale-x: 1.05; | copy | |
| .scale-x-110 | --transform-scale-x: 1.1; | copy | |
| .scale-x-125 | --transform-scale-x: 1.25; | copy | |
| .scale-x-150 | --transform-scale-x: 1.5; | copy | |
| .scale-y-0 | --transform-scale-y: 0; | copy | |
| .scale-y-50 | --transform-scale-y: .5; | copy | |
| .scale-y-75 | --transform-scale-y: .75; | copy | |
| .scale-y-90 | --transform-scale-y: .9; | copy | |
| .scale-y-95 | --transform-scale-y: .95; | copy | |
| .scale-y-100 | --transform-scale-y: 1; | copy | |
| .scale-y-105 | --transform-scale-y: 1.05; | copy | |
| .scale-y-110 | --transform-scale-y: 1.1; | copy | |
| .scale-y-125 | --transform-scale-y: 1.25; | copy | |
| .scale-y-150 | --transform-scale-y: 1.5; | copy |
Define a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. [view docs]
| .rotate-0 | --transform-rotate: 0; | copy | |
| .rotate-1 | --transform-rotate: 1deg; | copy | |
| .rotate-2 | --transform-rotate: 2deg; | copy | |
| .rotate-3 | --transform-rotate: 3deg; | copy | |
| .rotate-6 | --transform-rotate: 6deg; | copy | |
| .rotate-12 | --transform-rotate: 12deg; | copy | |
| .rotate-45 | --transform-rotate: 45deg; | copy | |
| .rotate-90 | --transform-rotate: 90deg; | copy | |
| .rotate-180 | --transform-rotate: 180deg; | copy | |
| .-rotate-180 | --transform-rotate: -180deg; | copy | |
| .-rotate-90 | --transform-rotate: -90deg; | copy | |
| .-rotate-45 | --transform-rotate: -45deg; | copy | |
| .-rotate-12 | --transform-rotate: -12deg; | copy | |
| .-rotate-6 | --transform-rotate: -6deg; | copy | |
| .-rotate-3 | --transform-rotate: -3deg; | copy | |
| .-rotate-2 | --transform-rotate: -2deg; | copy | |
| .-rotate-1 | --transform-rotate: -1deg; | copy |
Reposition an element in the horizontal and/or vertical directions. [view docs]
| .translate-x-0 | --transform-translate-x: 0; | copy | |
| .translate-x-0.5 | --transform-translate-x: 0.125rem; | 2px | copy |
| .translate-x-1 | --transform-translate-x: 0.25rem; | 4px | copy |
| .translate-x-1.5 | --transform-translate-x: 0.375rem; | 6px | copy |
| .translate-x-2 | --transform-translate-x: 0.5rem; | 8px | copy |
| .translate-x-2.5 | --transform-translate-x: 0.625rem; | 10px | copy |
| .translate-x-3 | --transform-translate-x: 0.75rem; | 12px | copy |
| .translate-x-3.5 | --transform-translate-x: 0.875rem; | 14px | copy |
| .translate-x-4 | --transform-translate-x: 1rem; | 16px | copy |
| .translate-x-5 | --transform-translate-x: 1.25rem; | 20px | copy |
| .translate-x-6 | --transform-translate-x: 1.5rem; | 24px | copy |
| .translate-x-7 | --transform-translate-x: 1.75rem; | 28px | copy |
| .translate-x-8 | --transform-translate-x: 2rem; | 32px | copy |
| .translate-x-9 | --transform-translate-x: 2.25rem; | 36px | copy |
| .translate-x-10 | --transform-translate-x: 2.5rem; | 40px | copy |
| .translate-x-11 | --transform-translate-x: 2.75rem; | 44px | copy |
| .translate-x-12 | --transform-translate-x: 3rem; | 48px | copy |
| .translate-x-14 | --transform-translate-x: 3.5rem; | 56px | copy |
| .translate-x-16 | --transform-translate-x: 4rem; | 64px | copy |
| .translate-x-20 | --transform-translate-x: 5rem; | 80px | copy |
| .translate-x-24 | --transform-translate-x: 6rem; | 96px | copy |
| .translate-x-28 | --transform-translate-x: 7rem; | 112px | copy |
| .translate-x-32 | --transform-translate-x: 8rem; | 128px | copy |
| .translate-x-36 | --transform-translate-x: 8rem; | 144px | copy |
| .translate-x-40 | --transform-translate-x: 10rem; | 160px | copy |
| .translate-x-44 | --transform-translate-x: 11rem; | 176px | copy |
| .translate-x-48 | --transform-translate-x: 12rem; | 192px | copy |
| .translate-x-52 | --transform-translate-x: 13rem; | 208px | copy |
| .translate-x-56 | --transform-translate-x: 14rem; | 224px | copy |
| .translate-x-60 | --transform-translate-x: 15rem; | 240px | copy |
| .translate-x-64 | --transform-translate-x: 16rem; | 256px | copy |
| .translate-x-72 | --transform-translate-x: 18rem; | 288px | copy |
| .translate-x-80 | --transform-translate-x: 20rem; | 320px | copy |
| .translate-x-96 | --transform-translate-x: 24rem; | 384px | copy |
| .translate-x-px | --transform-translate-x: 1px; | copy | |
| .translate-x-1/2 | --transform-translate-x: 50%; | copy | |
| .translate-x-1/3 | --transform-translate-x: 33.333333%; | copy | |
| .translate-x-2/3 | --transform-translate-x: 66.6666666%; | copy | |
| .translate-x-1/4 | --transform-translate-x: 25%; | copy | |
| .translate-x-2/4 | --transform-translate-x: 50%; | copy | |
| .translate-x-3/4 | --transform-translate-x: 75%; | copy | |
| .translate-x-full | --transform-translate-x: 100%; | copy | |
| .-translate-x-0 | --transform-translate-x: 0; | copy | |
| .-translate-x-0.5 | --transform-translate-x: -0.125rem; | 2px | copy |
| .-translate-x-1 | --transform-translate-x: -0.25rem; | 4px | copy |
| .-translate-x-1.5 | --transform-translate-x: -0.375rem; | 6px | copy |
| .-translate-x-2 | --transform-translate-x: -0.5rem; | 8px | copy |
| .-translate-x-2.5 | --transform-translate-x: -0.625rem; | 10px | copy |
| .-translate-x-3 | --transform-translate-x: -0.75rem; | 12px | copy |
| .-translate-x-3.5 | --transform-translate-x: -0.875rem; | 14px | copy |
| .-translate-x-4 | --transform-translate-x: -1rem; | 16px | copy |
| .-translate-x-5 | --transform-translate-x: -1.25rem; | 20px | copy |
| .-translate-x-6 | --transform-translate-x: -1.5rem; | 24px | copy |
| .-translate-x-7 | --transform-translate-x: -1.75rem; | 28px | copy |
| .-translate-x-8 | --transform-translate-x: -2rem; | 32px | copy |
| .-translate-x-9 | --transform-translate-x: -2.25rem; | 36px | copy |
| .-translate-x-10 | --transform-translate-x: -2.5rem; | 40px | copy |
| .-translate-x-11 | --transform-translate-x: -2.75rem; | 44px | copy |
| .-translate-x-12 | --transform-translate-x: -3rem; | 48px | copy |
| .-translate-x-14 | --transform-translate-x: -3.5rem; | 56px | copy |
| .-translate-x-16 | --transform-translate-x: -4rem; | 64px | copy |
| .-translate-x-20 | --transform-translate-x: -5rem; | 80px | copy |
| .-translate-x-24 | --transform-translate-x: -6rem; | 96px | copy |
| .-translate-x-28 | --transform-translate-x: -7rem; | 112px | copy |
| .-translate-x-32 | --transform-translate-x: -8rem; | 128px | copy |
| .-translate-x-36 | --transform-translate-x: -8rem; | 144px | copy |
| .-translate-x-40 | --transform-translate-x: -10rem; | 160px | copy |
| .-translate-x-44 | --transform-translate-x: -11rem; | 176px | copy |
| .-translate-x-48 | --transform-translate-x: -12rem; | 192px | copy |
| .-translate-x-52 | --transform-translate-x: -13rem; | 208px | copy |
| .-translate-x-56 | --transform-translate-x: -14rem; | 224px | copy |
| .-translate-x-60 | --transform-translate-x: -15rem; | 240px | copy |
| .-translate-x-64 | --transform-translate-x: -16rem; | 256px | copy |
| .-translate-x-72 | --transform-translate-x: -18rem; | 288px | copy |
| .-translate-x-80 | --transform-translate-x: -20rem; | 320px | copy |
| .-translate-x-96 | --transform-translate-x: -24rem; | 384px | copy |
| .-translate-x-px | --transform-translate-x: -1px; | copy | |
| .-translate-x-1/2 | --transform-translate-x: -50%; | copy | |
| .-translate-x-1/3 | --transform-translate-x: -33.333333%; | copy | |
| .-translate-x-2/3 | --transform-translate-x: -66.6666666%; | copy | |
| .-translate-x-1/4 | --transform-translate-x: -25%; | copy | |
| .-translate-x-2/4 | --transform-translate-x: -50%; | copy | |
| .-translate-x-3/4 | --transform-translate-x: -75%; | copy | |
| .-translate-x-full | --transform-translate-x: -100%; | copy | |
| .translate-y-0 | --transform-translate-y: 0; | copy | |
| .translate-y-0.5 | --transform-translate-y: 0.125rem; | 2px | copy |
| .translate-y-1 | --transform-translate-y: 0.25rem; | 4px | copy |
| .translate-y-1.5 | --transform-translate-y: 0.375rem; | 6px | copy |
| .translate-y-2 | --transform-translate-y: 0.5rem; | 8px | copy |
| .translate-y-2.5 | --transform-translate-y: 0.625rem; | 10px | copy |
| .translate-y-3 | --transform-translate-y: 0.75rem; | 12px | copy |
| .translate-y-3.5 | --transform-translate-y: 0.875rem; | 14px | copy |
| .translate-y-4 | --transform-translate-y: 1rem; | 16px | copy |
| .translate-y-5 | --transform-translate-y: 1.25rem; | 20px | copy |
| .translate-y-6 | --transform-translate-y: 1.5rem; | 24px | copy |
| .translate-y-7 | --transform-translate-y: 1.75rem; | 28px | copy |
| .translate-y-8 | --transform-translate-y: 2rem; | 32px | copy |
| .translate-y-9 | --transform-translate-y: 2.25rem; | 36px | copy |
| .translate-y-10 | --transform-translate-y: 2.5rem; | 40px | copy |
| .translate-y-11 | --transform-translate-y: 2.75rem; | 44px | copy |
| .translate-y-12 | --transform-translate-y: 3rem; | 48px | copy |
| .translate-y-14 | --transform-translate-y: 3.5rem; | 56px | copy |
| .translate-y-16 | --transform-translate-y: 4rem; | 64px | copy |
| .translate-y-20 | --transform-translate-y: 5rem; | 80px | copy |
| .translate-y-24 | --transform-translate-y: 6rem; | 96px | copy |
| .translate-y-28 | --transform-translate-y: 7rem; | 112px | copy |
| .translate-y-32 | --transform-translate-y: 8rem; | 128px | copy |
| .translate-y-36 | --transform-translate-y: 8rem; | 144px | copy |
| .translate-y-40 | --transform-translate-y: 10rem; | 160px | copy |
| .translate-y-44 | --transform-translate-y: 11rem; | 176px | copy |
| .translate-y-48 | --transform-translate-y: 12rem; | 192px | copy |
| .translate-y-52 | --transform-translate-y: 13rem; | 208px | copy |
| .translate-y-56 | --transform-translate-y: 14rem; | 224px | copy |
| .translate-y-60 | --transform-translate-y: 15rem; | 240px | copy |
| .translate-y-64 | --transform-translate-y: 16rem; | 256px | copy |
| .translate-y-72 | --transform-translate-y: 18rem; | 288px | copy |
| .translate-y-80 | --transform-translate-y: 20rem; | 320px | copy |
| .translate-y-96 | --transform-translate-y: 24rem; | 384px | copy |
| .translate-y-px | --transform-translate-y: 1px; | copy | |
| .translate-y-1/2 | --transform-translate-y: 50%; | copy | |
| .translate-y-1/3 | --transform-translate-y: 33.333333%; | copy | |
| .translate-y-2/3 | --transform-translate-y: 66.6666666%; | copy | |
| .translate-y-1/4 | --transform-translate-y: 25%; | copy | |
| .translate-y-2/4 | --transform-translate-y: 50%; | copy | |
| .translate-y-3/4 | --transform-translate-y: 75%; | copy | |
| .translate-y-full | --transform-translate-y: 100%; | copy | |
| .-translate-y-0 | --transform-translate-y: 0; | copy | |
| .-translate-y-0.5 | --transform-translate-y: -0.125rem; | 2px | copy |
| .-translate-y-1 | --transform-translate-y: -0.25rem; | 4px | copy |
| .-translate-y-1.5 | --transform-translate-y: -0.375rem; | 6px | copy |
| .-translate-y-2 | --transform-translate-y: -0.5rem; | 8px | copy |
| .-translate-y-2.5 | --transform-translate-y: -0.625rem; | 10px | copy |
| .-translate-y-3 | --transform-translate-y: -0.75rem; | 12px | copy |
| .-translate-y-3.5 | --transform-translate-y: -0.875rem; | 14px | copy |
| .-translate-y-4 | --transform-translate-y: -1rem; | 16px | copy |
| .-translate-y-5 | --transform-translate-y: -1.25rem; | 20px | copy |
| .-translate-y-6 | --transform-translate-y: -1.5rem; | 24px | copy |
| .-translate-y-7 | --transform-translate-y: -1.75rem; | 28px | copy |
| .-translate-y-8 | --transform-translate-y: -2rem; | 32px | copy |
| .-translate-y-9 | --transform-translate-y: -2.25rem; | 36px | copy |
| .-translate-y-10 | --transform-translate-y: -2.5rem; | 40px | copy |
| .-translate-y-11 | --transform-translate-y: -2.75rem; | 44px | copy |
| .-translate-y-12 | --transform-translate-y: -3rem; | 48px | copy |
| .-translate-y-14 | --transform-translate-y: -3.5rem; | 56px | copy |
| .-translate-y-16 | --transform-translate-y: -4rem; | 64px | copy |
| .-translate-y-20 | --transform-translate-y: -5rem; | 80px | copy |
| .-translate-y-24 | --transform-translate-y: -6rem; | 96px | copy |
| .-translate-y-28 | --transform-translate-y: -7rem; | 112px | copy |
| .-translate-y-32 | --transform-translate-y: -8rem; | 128px | copy |
| .-translate-y-36 | --transform-translate-y: -8rem; | 144px | copy |
| .-translate-y-40 | --transform-translate-y: -10rem; | 160px | copy |
| .-translate-y-44 | --transform-translate-y: -11rem; | 176px | copy |
| .-translate-y-48 | --transform-translate-y: -12rem; | 192px | copy |
| .-translate-y-52 | --transform-translate-y: -13rem; | 208px | copy |
| .-translate-y-56 | --transform-translate-y: -14rem; | 224px | copy |
| .-translate-y-60 | --transform-translate-y: -15rem; | 240px | copy |
| .-translate-y-64 | --transform-translate-y: -16rem; | 256px | copy |
| .-translate-y-72 | --transform-translate-y: -18rem; | 288px | copy |
| .-translate-y-80 | --transform-translate-y: -20rem; | 320px | copy |
| .-translate-y-96 | --transform-translate-y: -24rem; | 384px | copy |
| .-translate-y-px | --transform-translate-y: -1px; | copy | |
| .-translate-y-1/2 | --transform-translate-y: -50%; | copy | |
| .-translate-y-1/3 | --transform-translate-y: -33.333333%; | copy | |
| .-translate-y-2/3 | --transform-translate-y: -66.6666666%; | copy | |
| .-translate-y-1/4 | --transform-translate-y: -25%; | copy | |
| .-translate-y-2/4 | --transform-translate-y: -50%; | copy | |
| .-translate-y-3/4 | --transform-translate-y: -75%; | copy | |
| .-translate-y-full | --transform-translate-y: -100%; | copy |
Define a transformation that skews an element on the 2D plane. [view docs]
| .skew-x-0 | --transform-skew-x: 0; | copy | |
| .skew-x-1 | --transform-skew-x: 1deg; | copy | |
| .skew-x-2 | --transform-skew-x: 2deg; | copy | |
| .skew-x-3 | --transform-skew-x: 3deg; | copy | |
| .skew-x-6 | --transform-skew-x: 6deg; | copy | |
| .skew-x-12 | --transform-skew-x: 12deg; | copy | |
| .-skew-x-12 | --transform-skew-x: -12deg; | copy | |
| .-skew-x-6 | --transform-skew-x: -6deg; | copy | |
| .-skew-x-3 | --transform-skew-x: -3deg; | copy | |
| .-skew-x-2 | --transform-skew-x: -2deg; | copy | |
| .-skew-x-1 | --transform-skew-x: -1deg; | copy | |
| .skew-y-0 | --transform-skew-y: 0; | copy | |
| .skew-y-1 | --transform-skew-y: 1deg; | copy | |
| .skew-y-2 | --transform-skew-y: 2deg; | copy | |
| .skew-y-3 | --transform-skew-y: 3deg; | copy | |
| .skew-y-6 | --transform-skew-y: 6deg; | copy | |
| .skew-y-12 | --transform-skew-y: 12deg; | copy | |
| .-skew-y-12 | --transform-skew-y: -12deg; | copy | |
| .-skew-y-6 | --transform-skew-y: -6deg; | copy | |
| .-skew-y-3 | --transform-skew-y: -3deg; | copy | |
| .-skew-y-2 | --transform-skew-y: -2deg; | copy | |
| .-skew-y-1 | --transform-skew-x: -1deg; | copy |
Define how the browser distributes space between and around content items along the main-axis of a flex container. [view docs]
| .justify-start | justify-content: flex-start; | copy | |
| .justify-center | justify-content: center; | copy | |
| .justify-end | justify-content: flex-end; | copy | |
| .justify-between | justify-content: space-between; | copy | |
| .justify-around | justify-content: space-around; | copy | |
| .justify-evenly | justify-content: space-evenly; | copy |
Define the default justify-self for all items of the box. [view docs]
| .justify-items-stretch | justify-items: stretch; | copy | |
| .justify-items-start | justify-items: start; | copy | |
| .justify-items-center | justify-items: center; | copy | |
| .justify-items-end | justify-items: end; | copy | |
| .justify-items-auto | justify-items: auto; | copy |
Set the way a box is justified inside its alignment container along the appropriate axis. [view docs]
| .justify-self-stretch | justify-self: stretch; | copy | |
| .justify-self-start | justify-self: start; | copy | |
| .justify-self-center | justify-self: center; | copy | |
| .justify-self-end | justify-self: end; | copy | |
| .justify-self-auto | justify-self: auto; | copy |
Set the distribution of space between and around content items. [view docs]
| .content-start | align-content: flex-start; | copy | |
| .content-center | align-content: center; | copy | |
| .content-end | align-content: flex-end; | copy | |
| .content-between | align-content: space-between; | copy | |
| .content-around | align-content: space-around; | copy | |
| .content-evenly | align-content: space-evenly; | copy |
Set the align-self value on all direct children as a group. [view docs]
| .items-stretch | align-items: stretch; | copy | |
| .items-start | align-items: flex-start; | copy | |
| .items-center | align-items: center; | copy | |
| .items-end | align-items: flex-end; | copy | |
| .items-baseline | align-items: baseline; | copy |
Override a grid or flex item's align-items value. [view docs]
| .self-auto | align-self: auto; | copy | |
| .self-start | align-self: flex-start; | copy | |
| .self-center | align-self: center; | copy | |
| .self-end | align-self: flex-end; | copy | |
| .self-stretch | align-self: stretch; | copy | |
| .self-baseline | align-self: baseline; | copy |
Align content along both the block and inline directions at once. [view docs]
| .place-content-start | place-content: start; | copy | |
| .place-content-center | place-content: center; | copy | |
| .place-content-end | place-content: end; | copy | |
| .place-content-between | place-content: space-between; | copy | |
| .place-content-around | place-content: space-around; | copy | |
| .place-content-evenly | place-content: space-evenly; | copy |
Align items along both the block and inline directions. [view docs]
| .place-items-stretch | place-items: stretch; | copy | |
| .place-items-start | place-items: start; | copy | |
| .place-items-center | place-items: center; | copy | |
| .place-items-end | place-items: end; | copy |
Align an individual item in both the block and inline directions. [view docs]
| .place-self-auto | place-self: auto; | copy | |
| .place-self-start | place-self: start; | copy | |
| .place-self-center | place-self: center; | copy | |
| .place-self-end | place-self: end; | copy | |
| .place-self-stretch | place-self: stretch; | copy |
Set how a flex item will grow or shrink to fit the space available in its flex container. [view docs]
| .flex | display: flex; | copy | |
| .inline-flex | display: inline-flex; | copy |
Set how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). [view docs]
| .flex-row | flex-direction: row; | copy | |
| .flex-row-reverse | flex-direction: row-reverse; | copy | |
| .flex-col | flex-direction: column; | copy | |
| .flex-col-reverse | flex-direction: column-reverse; | copy |
Set whether flex items are forced onto one line or can wrap onto multiple lines. [view docs]
| .flex-nowrap | flex-wrap: nowrap; | copy | |
| .flex-wrap | flex-wrap: wrap; | copy | |
| .flex-wrap-reverse | flex-wrap: wrap-reverse; | copy |
Set how a flex item will grow or shrink to fit the space available in its flex container. [view docs]
| .flex-1 | flex: 1 1 0%; | copy | |
| .flex-auto | flex: 1 1 auto; | copy | |
| .flex-initial | flex: 0 1 auto; | copy | |
| .flex-none | flex: none; | copy |
Set the flex grow factor of a flex item's main size. [view docs]
| .flex-grow | flex-grow: 1; | copy | |
| .flex-grow-0 | flex-grow: 0; | copy |
Set the flex shrink factor of a flex item. [view docs]
| .flex-shrink | flex-shrink: 1; | copy | |
| .flex-shrink-0 | flex-shrink: 0; | copy |
Set the order to lay out an item in a flex or grid container. [view docs]
| .order-first | order: -9999; | copy | |
| .order-last | order: 9999; | copy | |
| .order-none | order: 0; | copy | |
| .order-1 | order: 1; | copy | |
| .order-2 | order: 2; | copy | |
| .order-3 | order: 3; | copy | |
| .order-4 | order: 4; | copy | |
| .order-5 | order: 5; | copy | |
| .order-6 | order: 6; | copy | |
| .order-7 | order: 7; | copy | |
| .order-8 | order: 8; | copy | |
| .order-9 | order: 9; | copy | |
| .order-10 | order: 10; | copy | |
| .order-11 | order: 11; | copy | |
| .order-12 | order: 12; | copy |
Set the width of an element. [view docs]
| .w-0 | width: 0; | copy | |
| .w-0.5 | width: 0.125rem; | 2px | copy |
| .w-1 | width: 0.25rem; | 4px | copy |
| .w-1.5 | width: 0.375rem; | 6px | copy |
| .w-2 | width: 0.5rem; | 8px | copy |
| .w-2.5 | width: 0.625rem; | 10px | copy |
| .w-3 | width: 0.75rem; | 12px | copy |
| .w-3.5 | width: 0.875rem; | 14px | copy |
| .w-4 | width: 1rem; | 16px | copy |
| .w-5 | width: 1.25rem; | 20px | copy |
| .w-6 | width: 1.5rem; | 24px | copy |
| .w-8 | width: 2rem; | 32px | copy |
| .w-10 | width: 2.5rem; | 40px | copy |
| .w-11 | width: 2.75rem; | 44px | copy |
| .w-12 | width: 3rem; | 48px | copy |
| .w-14 | width: 3.5rem; | 56px | copy |
| .w-16 | width: 4rem; | 64px | copy |
| .w-20 | width: 5rem; | 80px | copy |
| .w-24 | width: 6rem; | 96px | copy |
| .w-28 | width: 7rem; | 112px | copy |
| .w-32 | width: 8rem; | 128px | copy |
| .w-36 | width: 9rem; | 144px | copy |
| .w-40 | width: 10rem; | 160px | copy |
| .w-44 | width: 11rem; | 176px | copy |
| .w-48 | width: 12rem; | 192px | copy |
| .w-52 | width: 13rem; | 208px | copy |
| .w-56 | width: 14rem; | 224px | copy |
| .w-64 | width: 16rem; | 256px | copy |
| .w-72 | width: 18rem; | 288px | copy |
| .w-80 | width: 20rem; | 320px | copy |
| .w-96 | width: 24rem; | 384px | copy |
| .w-px | width: 1px; | copy | |
| .w-auto | width: auto; | copy | |
| .w-1/2 | width: 50%; | copy | |
| .w-1/3 | width: 33.333333%; | copy | |
| .w-2/3 | width: 66.666667%; | copy | |
| .w-1/4 | width: 25%; | copy | |
| .w-2/4 | width: 50%; | copy | |
| .w-3/4 | width: 75%; | copy | |
| .w-1/5 | width: 20%; | copy | |
| .w-2/5 | width: 40%; | copy | |
| .w-3/5 | width: 60%; | copy | |
| .w-4/5 | width: 80%; | copy | |
| .w-1/6 | width: 16.666667%; | copy | |
| .w-2/6 | width: 33.333333%; | copy | |
| .w-3/6 | width: 50%; | copy | |
| .w-4/6 | width: 66.666667%; | copy | |
| .w-5/6 | width: 83.333333%; | copy | |
| .w-1/12 | width: 8.333333%; | copy | |
| .w-2/12 | width: 16.666667%; | copy | |
| .w-3/12 | width: 25%; | copy | |
| .w-4/12 | width: 33.333333%; | copy | |
| .w-5/12 | width: 41.666667%; | copy | |
| .w-6/12 | width: 50%; | copy | |
| .w-7/12 | width: 58.333333%; | copy | |
| .w-8/12 | width: 66.666667%; | copy | |
| .w-9/12 | width: 75%; | copy | |
| .w-10/12 | width: 83.333333%; | copy | |
| .w-11/12 | width: 91.666667%; | copy | |
| .w-full | width: 100%; | copy | |
| .w-screen | width: 100vw; | copy | |
| .w-min | width: min-content; | copy | |
| .w-max | width: max-content; | copy |
Set the minimum width of an element. [view docs]
| .min-w-0 | min-width: 0; | copy | |
| .min-w-full | min-width: 100%; | copy | |
| .min-w-min | min-width: min-content; | copy | |
| .min-w-max | min-width: max-content; | copy |
Set the maximum width of an element. [view docs]
| .max-w-0 | max-width: 0rem; | copy | |
| .max-w-none | max-width: none; | copy | |
| .max-w-xs | max-width: 20rem; | 320px | copy |
| .max-w-sm | max-width: 24rem; | 384px | copy |
| .max-w-md | max-width: 28rem; | 448px | copy |
| .max-w-lg | max-width: 32rem; | 512px | copy |
| .max-w-xl | max-width: 36rem; | 576px | copy |
| .max-w-2xl | max-width: 42rem; | 672px | copy |
| .max-w-3xl | max-width: 48rem; | 768px | copy |
| .max-w-4xl | max-width: 56rem; | 896px | copy |
| .max-w-5xl | max-width: 64rem; | 1024px | copy |
| .max-w-6xl | max-width: 72rem; | 1152px | copy |
| .max-w-7xl | max-width: 80rem; | 1280px | copy |
| .max-w-full | max-width: 100%; | copy | |
| .max-w-min | max-width: min-content; | copy | |
| .max-w-max | max-width: max-content; | copy | |
| .max-w-prose | max-width: 65ch; | copy | |
| .max-w-screen-sm | max-width: 640px; | copy | |
| .max-w-screen-md | max-width: 768px; | copy | |
| .max-w-screen-lg | max-width: 1024px; | copy | |
| .max-w-screen-xl | max-width: 1280px; | copy | |
| .max-w-screen-2xl | max-width: 1536px; | copy |
Set the height of an element. [view docs]
| .h-0 | height: 0; | copy | |
| .h-0.5 | height: 0.125rem; | 2px | copy |
| .h-1 | height: 0.25rem; | 4px | copy |
| .h-1.5 | height: 0.375rem; | 6px | copy |
| .h-2 | height: 0.5rem; | 8px | copy |
| .h-2.5 | height: 0.625rem; | 10px | copy |
| .h-3 | height: 0.75rem; | 12px | copy |
| .h-3.5 | height: 0.875rem; | 14px | copy |
| .h-4 | height: 1rem; | 16px | copy |
| .h-5 | height: 1.25rem; | 20px | copy |
| .h-6 | height: 1.5rem; | 24px | copy |
| .h-8 | height: 2rem; | 32px | copy |
| .h-10 | height: 2.5rem; | 40px | copy |
| .h-11 | height: 2.75rem; | 44px | copy |
| .h-12 | height: 3rem; | 48px | copy |
| .h-14 | height: 3.5rem; | 56px | copy |
| .h-16 | height: 4rem; | 64px | copy |
| .h-20 | height: 5rem; | 80px | copy |
| .h-24 | height: 6rem; | 96px | copy |
| .h-28 | height: 7rem; | 112px | copy |
| .h-32 | height: 8rem; | 128px | copy |
| .h-36 | height: 9rem; | 144px | copy |
| .h-40 | height: 10rem; | 160px | copy |
| .h-44 | height: 11rem; | 176px | copy |
| .h-48 | height: 12rem; | 192px | copy |
| .h-52 | height: 13rem; | 208px | copy |
| .h-56 | height: 14rem; | 224px | copy |
| .h-64 | height: 16rem; | 256px | copy |
| .h-72 | height: 18rem; | 288px | copy |
| .h-80 | height: 20rem; | 320px | copy |
| .h-96 | height: 24rem; | 384px | copy |
| .h-px | height: 1px; | copy | |
| .h-auto | height: auto; | copy | |
| .h-1/2 | height: 50%; | copy | |
| .h-1/3 | height: 33.333333%; | copy | |
| .h-2/3 | height: 66.666667%; | copy | |
| .h-1/4 | height: 25%; | copy | |
| .h-2/4 | height: 50%; | copy | |
| .h-3/4 | height: 75%; | copy | |
| .h-1/5 | height: 20%; | copy | |
| .h-2/5 | height: 40%; | copy | |
| .h-3/5 | height: 60%; | copy | |
| .h-4/5 | height: 80%; | copy | |
| .h-1/6 | height: 16.666667%; | copy | |
| .h-2/6 | height: 33.333333%; | copy | |
| .h-3/6 | height: 50%; | copy | |
| .h-4/6 | height: 66.666667%; | copy | |
| .h-5/6 | height: 83.333333%; | copy | |
| .h-full | height: 100%; | copy | |
| .h-screen | height: 100vh; | copy |
Set the minimum height of an element. [view docs]
| .min-h-0 | min-height: 0; | copy | |
| .min-h-full | min-height: 100%; | copy | |
| .min-h-screen | min-height: 100vh; | copy |
Set the maximum height of an element. [view docs]
| .max-h-0 | max-height: 0; | copy | |
| .max-h-0.5 | max-height: 0.125rem; | 2px | copy |
| .max-h-1 | max-height: 0.25rem; | 4px | copy |
| .max-h-1.5 | max-height: 0.375rem; | 6px | copy |
| .max-h-2 | max-height: 0.5rem; | 8px | copy |
| .max-h-2.5 | max-height: 0.625rem; | 10px | copy |
| .max-h-3 | max-height: 0.75rem; | 12px | copy |
| .max-h-3.5 | max-height: 0.875rem; | 14px | copy |
| .max-h-4 | max-height: 1rem; | 16px | copy |
| .max-h-5 | max-height: 1.25rem; | 20px | copy |
| .max-h-6 | max-height: 1.5rem; | 24px | copy |
| .max-h-8 | max-height: 2rem; | 32px | copy |
| .max-h-10 | max-height: 2.5rem; | 40px | copy |
| .max-h-11 | max-height: 2.75rem; | 44px | copy |
| .max-h-12 | max-height: 3rem; | 48px | copy |
| .max-h-14 | max-height: 3.5rem; | 56px | copy |
| .max-h-16 | max-height: 4rem; | 64px | copy |
| .max-h-20 | max-height: 5rem; | 80px | copy |
| .max-h-24 | max-height: 6rem; | 96px | copy |
| .max-h-28 | max-height: 7rem; | 112px | copy |
| .max-h-32 | max-height: 8rem; | 128px | copy |
| .max-h-36 | max-height: 9rem; | 144px | copy |
| .max-h-40 | max-height: 10rem; | 160px | copy |
| .max-h-44 | max-height: 11rem; | 176px | copy |
| .max-h-48 | max-height: 12rem; | 192px | copy |
| .max-h-52 | max-height: 13rem; | 208px | copy |
| .max-h-56 | max-height: 14rem; | 224px | copy |
| .max-h-64 | max-height: 16rem; | 256px | copy |
| .max-h-72 | max-height: 18rem; | 288px | copy |
| .max-h-80 | max-height: 20rem; | 320px | copy |
| .max-h-96 | max-height: 24rem; | 384px | copy |
| .max-h-px | max-height: 1px; | copy | |
| .max-h-full | max-height: 100%; | copy | |
| .max-h-screen | max-height: 100vh; | copy |
Round the corners of an element's outer border edge. [view docs]
| .rounded-none | border-radius: 0; | copy | |
| .rounded-sm | border-radius: 0.125rem; | 2px | copy |
| .rounded | border-radius: 0.25rem; | 4px | copy |
| .rounded-md | border-radius: 0.375rem; | 6px | copy |
| .rounded-lg | border-radius: 0.5rem; | 8px | copy |
| .rounded-xl | border-radius: 0.75rem; | 10px | copy |
| .rounded-2xl | border-radius: 1rem; | 12px | copy |
| .rounded-3xl | border-radius: 1.5rem; | 16px | copy |
| .rounded-full | border-radius: 9999px; | copy | |
| .rounded-t-none | border-top-left-radius: 0; border-top-right-radius: 0; | copy | |
| .rounded-r-none | border-top-right-radius: 0; border-bottom-right-radius: 0; | copy | |
| .rounded-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0; | copy | |
| .rounded-l-none | border-top-left-radius: 0; border-bottom-left-radius: 0; | copy | |
| .rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; | 2px | copy |
| .rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; | 2px | copy |
| .rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; | 2px | copy |
| .rounded-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; | 2px | copy |
| .rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; | 4px | copy |
| .rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; | 4px | copy |
| .rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | 4px | copy |
| .rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; | 4px | copy |
| .rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; | 6px | copy |
| .rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; | 6px | copy |
| .rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; | 6px | copy |
| .rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; | 6px | copy |
| .rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; | 8px | copy |
| .rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; | 8px | copy |
| .rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; | 8px | copy |
| .rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; | 8px | copy |
| .rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; | 10px | copy |
| .rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; | 10px | copy |
| .rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; | 10px | copy |
| .rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; | 10px | copy |
| .rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem; | 12px | copy |
| .rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; | 12px | copy |
| .rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; | 12px | copy |
| .rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; | 12px | copy |
| .rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; | 16px | copy |
| .rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; | 16px | copy |
| .rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem; | 16px | copy |
| .rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; | 16px | copy |
| .rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; | copy | |
| .rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; | copy | |
| .rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; | copy | |
| .rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; | copy | |
| .rounded-tl-none | border-top-left-radius: 0; | copy | |
| .rounded-tr-none | border-top-right-radius: 0; | copy | |
| .rounded-br-none | border-bottom-right-radius: 0; | copy | |
| .rounded-bl-none | border-bottom-left-radius: 0; | copy | |
| .rounded-tl-sm | border-top-left-radius: 0.125rem; | 2px | copy |
| .rounded-tr-sm | border-top-right-radius: 0.125rem; | 2px | copy |
| .rounded-br-sm | border-bottom-right-radius: 0.125rem; | 2px | copy |
| .rounded-bl-sm | border-bottom-left-radius: 0.125rem; | 2px | copy |
| .rounded-tl | border-top-left-radius: 0.25rem; | 4px | copy |
| .rounded-tr | border-top-right-radius: 0.25rem; | 4px | copy |
| .rounded-br | border-bottom-right-radius: 0.25rem; | 4px | copy |
| .rounded-bl | border-bottom-left-radius: 0.25rem; | 4px | copy |
| .rounded-tl-md | border-top-left-radius: 0.375rem; | 6px | copy |
| .rounded-tr-md | border-top-right-radius: 0.375rem; | 6px | copy |
| .rounded-br-md | border-bottom-right-radius: 0.375rem; | 6px | copy |
| .rounded-bl-md | border-bottom-left-radius: 0.375rem; | 6px | copy |
| .rounded-tl-lg | border-top-left-radius: 0.5rem; | 8px | copy |
| .rounded-tr-lg | border-top-right-radius: 0.5rem; | 8px | copy |
| .rounded-br-lg | border-bottom-right-radius: 0.5rem; | 8px | copy |
| .rounded-bl-lg | border-bottom-left-radius: 0.5rem; | 8px | copy |
| .rounded-tl-xl | border-top-left-radius: 0.75rem; | 10px | copy |
| .rounded-tr-xl | border-top-right-radius: 0.75rem; | 10px | copy |
| .rounded-br-xl | border-bottom-right-radius: 0.75rem; | 10px | copy |
| .rounded-bl-xl | border-bottom-left-radius: 0.75rem; | 10px | copy |
| .rounded-tl-2xl | border-top-left-radius: 1rem; | 12px | copy |
| .rounded-tr-2xl | border-top-right-radius: 1rem; | 12px | copy |
| .rounded-br-2xl | border-bottom-right-radius: 1rem; | 12px | copy |
| .rounded-bl-2xl | border-bottom-left-radius: 1rem; | 12px | copy |
| .rounded-tl-3xl | border-top-left-radius: 1.5rem; | 16px | copy |
| .rounded-tr-3xl | border-top-right-radius: 1.5rem; | 16px | copy |
| .rounded-br-3xl | border-bottom-right-radius: 1.5rem; | 16px | copy |
| .rounded-bl-3xl | border-bottom-left-radius: 1.5rem; | 16px | copy |
| .rounded-tl-full | border-top-left-radius: 9999px; | copy | |
| .rounded-tr-full | border-top-right-radius: 9999px; | copy | |
| .rounded-br-full | border-bottom-right-radius: 9999px; | copy | |
| .rounded-bl-full | border-bottom-left-radius: 9999px; | copy |
Set the width of an element's border. [view docs]
| .border | border-width: 1px; | copy | |
| .border-0 | border-width: 0; | copy | |
| .border-2 | border-width: 2px; | copy | |
| .border-4 | border-width: 4px; | copy | |
| .border-8 | border-width: 8px; | copy | |
| .border-t | border-top-width: 1px; | copy | |
| .border-t-0 | border-top-width: 0; | copy | |
| .border-t-2 | border-top-width: 2px; | copy | |
| .border-t-4 | border-top-width: 4px; | copy | |
| .border-t-8 | border-top-width: 8px; | copy | |
| .border-r | border-right-width: 1px; | copy | |
| .border-r-0 | border-right-width: 0; | copy | |
| .border-r-2 | border-right-width: 2px; | copy | |
| .border-r-4 | border-right-width: 4px; | copy | |
| .border-r-8 | border-right-width: 8px; | copy | |
| .border-b | border-bottom-width: 1px; | copy | |
| .border-b-0 | border-bottom-width: 0; | copy | |
| .border-b-2 | border-bottom-width: 2px; | copy | |
| .border-b-4 | border-bottom-width: 4px; | copy | |
| .border-b-8 | border-bottom-width: 8px; | copy | |
| .border-l | border-left-width: 1px; | copy | |
| .border-l-0 | border-left-width: 0; | copy | |
| .border-l-2 | border-left-width: 2px; | copy | |
| .border-l-4 | border-left-width: 4px; | copy | |
| .border-l-8 | border-left-width: 8px; | copy |
Set the color of an element's border. [view docs]
| .border-transparent | border-color: transparent; | copy | ||
| .border-current | border-color: currentColor; | copy | ||
| .border-black | border-color: #000000; | copy | ||
| .border-white | border-color: #ffffff; | copy | ||
| .border-gray-50 | border-color: #F9FAFB; | copy | ||
| .border-gray-100 | border-color: #F3F4F6; | copy | ||
| .border-gray-200 | border-color: #E5E7EB; | copy | ||
| .border-gray-300 | border-color: #D1D5DB; | copy | ||
| .border-gray-400 | border-color: #9CA3AF; | copy | ||
| .border-gray-500 | border-color: #6B7280; | copy | ||
| .border-gray-600 | border-color: #4B5563; | copy | ||
| .border-gray-700 | border-color: #374151; | copy | ||
| .border-gray-800 | border-color: #1F2937; | copy | ||
| .border-gray-900 | border-color: #111827; | copy | ||
| .border-red-50 | border-color: #FEF2F2; | copy | ||
| .border-red-100 | border-color: #FEE2E2; | copy | ||
| .border-red-200 | border-color: #FECACA; | copy | ||
| .border-red-300 | border-color: #FCA5A5; | copy | ||
| .border-red-400 | border-color: #F87171; | copy | ||
| .border-red-500 | border-color: #EF4444; | copy | ||
| .border-red-600 | border-color: #DC2626; | copy | ||
| .border-red-700 | border-color: #B91C1C; | copy | ||
| .border-red-800 | border-color: #991B1B; | copy | ||
| .border-red-900 | border-color: #7F1D1D; | copy | ||
| .border-yellow-50 | border-color: #FFFBEB; | copy | ||
| .border-yellow-100 | border-color: #FEF3C7; | copy | ||
| .border-yellow-200 | border-color: #FDE68A; | copy | ||
| .border-yellow-300 | border-color: #FCD34D; | copy | ||
| .border-yellow-400 | border-color: #FBBF24; | copy | ||
| .border-yellow-500 | border-color: #F59E0B; | copy | ||
| .border-yellow-600 | border-color: #D97706; | copy | ||
| .border-yellow-700 | border-color: #B45309; | copy | ||
| .border-yellow-800 | border-color: #92400E; | copy | ||
| .border-yellow-900 | border-color: #78350F; | copy | ||
| .border-green-50 | border-color: #ECFDF5; | copy | ||
| .border-green-100 | border-color: #D1FAE5; | copy | ||
| .border-green-200 | border-color: #A7F3D0; | copy | ||
| .border-green-300 | border-color: #6EE7B7; | copy | ||
| .border-green-400 | border-color: #34D399; | copy | ||
| .border-green-500 | border-color: #10B981; | copy | ||
| .border-green-600 | border-color: #059669; | copy | ||
| .border-green-700 | border-color: #047857; | copy | ||
| .border-green-800 | border-color: #065F46; | copy | ||
| .border-green-900 | border-color: #064E3B; | copy | ||
| .border-blue-50 | border-color: #EFF6FF; | copy | ||
| .border-blue-100 | border-color: #DBEAFE; | copy | ||
| .border-blue-200 | border-color: #BFDBFE; | copy | ||
| .border-blue-300 | border-color: #93C5FD; | copy | ||
| .border-blue-400 | border-color: #60A5FA; | copy | ||
| .border-blue-500 | border-color: #3B82F6; | copy | ||
| .border-blue-600 | border-color: #2563EB; | copy | ||
| .border-blue-700 | border-color: #1D4ED8; | copy | ||
| .border-blue-800 | border-color: #1E40AF; | copy | ||
| .border-blue-900 | border-color: #1E3A8A; | copy | ||
| .border-indigo-50 | border-color: #EEF2FF; | copy | ||
| .border-indigo-100 | border-color: #E0E7FF; | copy | ||
| .border-indigo-200 | border-color: #C7D2FE; | copy | ||
| .border-indigo-300 | border-color: #A5B4FC; | copy | ||
| .border-indigo-400 | border-color: #818CF8; | copy | ||
| .border-indigo-500 | border-color: #6366F1; | copy | ||
| .border-indigo-600 | border-color: #4F46E5; | copy | ||
| .border-indigo-700 | border-color: #4338CA; | copy | ||
| .border-indigo-800 | border-color: #3730A3; | copy | ||
| .border-indigo-900 | border-color: #312E81; | copy | ||
| .border-purple-50 | border-color: #F5F3FF; | copy | ||
| .border-purple-100 | border-color: #EDE9FE; | copy | ||
| .border-purple-200 | border-color: #DDD6FE; | copy | ||
| .border-purple-300 | border-color: #C4B5FD; | copy | ||
| .border-purple-400 | border-color: #A78BFA; | copy | ||
| .border-purple-500 | border-color: #8B5CF6; | copy | ||
| .border-purple-600 | border-color: #7C3AED; | copy | ||
| .border-purple-700 | border-color: #6D28D9; | copy | ||
| .border-purple-800 | border-color: #5B21B6; | copy | ||
| .border-purple-900 | border-color: #4C1D95; | copy | ||
| .border-pink-50 | border-color: #FDF2F8; | copy | ||
| .border-pink-100 | border-color: #FCE7F3; | copy | ||
| .border-pink-200 | border-color: #FBCFE8; | copy | ||
| .border-pink-300 | border-color: #F9A8D4; | copy | ||
| .border-pink-400 | border-color: #F472B6; | copy | ||
| .border-pink-500 | border-color: #EC4899; | copy | ||
| .border-pink-600 | border-color: #DB2777; | copy | ||
| .border-pink-700 | border-color: #BE185D; | copy | ||
| .border-pink-800 | border-color: #9D174D; | copy | ||
| .border-pink-900 | border-color: #831843; | copy |
Set the opacity of an element's border. [view docs]
| .border-opacity-0 | border-opacity: 0; | copy | |
| .border-opacity-5 | border-opacity: 0.05; | copy | |
| .border-opacity-10 | border-opacity: 0.1; | copy | |
| .border-opacity-20 | border-opacity: 0.2; | copy | |
| .border-opacity-25 | border-opacity: 0.25; | copy | |
| .border-opacity-30 | border-opacity: 0.3; | copy | |
| .border-opacity-40 | border-opacity: 0.4; | copy | |
| .border-opacity-50 | border-opacity: 0.5; | copy | |
| .border-opacity-60 | border-opacity: 0.6; | copy | |
| .border-opacity-70 | border-opacity: 0.7; | copy | |
| .border-opacity-75 | border-opacity: 0.75; | copy | |
| .border-opacity-80 | border-opacity: 0.8; | copy | |
| .border-opacity-90 | border-opacity: 0.9; | copy | |
| .border-opacity-100 | border-opacity: 1; | copy |
Set the style of an element's border. [view docs]
| .border-solid | border-style: solid; | copy | |
| .border-dashed | border-style: dashed; | copy | |
| .border-dotted | border-style: dotted; | copy | |
| .border-double | border-style: double; | copy | |
| .border-none | border-style: none; | copy |
Set the border width between elements. [view docs]
| .divide-x-0 | border-left-width: 0; | copy | |
| .divide-x-2 | border-left-width: 2px; | copy | |
| .divide-x-4 | border-left-width: 4px; | copy | |
| .divide-x-8 | border-left-width: 8px; | copy | |
| .divide-x | border-left-width: 1px; | copy | |
| .divide-y-0 | border-top-width: 0; | copy | |
| .divide-y-2 | border-top-width: 2px; | copy | |
| .divide-y-4 | border-top-width: 4px; | copy | |
| .divide-y-8 | border-top-width: 8px; | copy | |
| .divide-y | border-top-width: 1px; | copy | |
| .divide-x-reverse | --divide-x-reverse: 1 | copy | |
| .divide-y-reverse | --divide-y-reverse: 1 | copy |
Set the border color between elements. [view docs]
| .divide-transparent | border-color: transparent; | copy | ||
| .divide-current | border-color: currentColor; | copy | ||
| .divide-black | border-color: #000000; | copy | ||
| .divide-white | border-color: #ffffff; | copy | ||
| .divide-gray-50 | border-color: #F9FAFB; | copy | ||
| .divide-gray-100 | border-color: #F3F4F6; | copy | ||
| .divide-gray-200 | border-color: #E5E7EB; | copy | ||
| .divide-gray-300 | border-color: #D1D5DB; | copy | ||
| .divide-gray-400 | border-color: #9CA3AF; | copy | ||
| .divide-gray-500 | border-color: #6B7280; | copy | ||
| .divide-gray-600 | border-color: #4B5563; | copy | ||
| .divide-gray-700 | border-color: #374151; | copy | ||
| .divide-gray-800 | border-color: #1F2937; | copy | ||
| .divide-gray-900 | border-color: #111827; | copy | ||
| .divide-red-50 | border-color: #FEF2F2; | copy | ||
| .divide-red-100 | border-color: #FEE2E2; | copy | ||
| .divide-red-200 | border-color: #FECACA; | copy | ||
| .divide-red-300 | border-color: #FCA5A5; | copy | ||
| .divide-red-400 | border-color: #F87171; | copy | ||
| .divide-red-500 | border-color: #EF4444; | copy | ||
| .divide-red-600 | border-color: #DC2626; | copy | ||
| .divide-red-700 | border-color: #B91C1C; | copy | ||
| .divide-red-800 | border-color: #991B1B; | copy | ||
| .divide-red-900 | border-color: #7F1D1D; | copy | ||
| .divide-yellow-50 | border-color: #FFFBEB; | copy | ||
| .divide-yellow-100 | border-color: #FEF3C7; | copy | ||
| .divide-yellow-200 | border-color: #FDE68A; | copy | ||
| .divide-yellow-300 | border-color: #FCD34D; | copy | ||
| .divide-yellow-400 | border-color: #FBBF24; | copy | ||
| .divide-yellow-500 | border-color: #F59E0B; | copy | ||
| .divide-yellow-600 | border-color: #D97706; | copy | ||
| .divide-yellow-700 | border-color: #B45309; | copy | ||
| .divide-yellow-800 | border-color: #92400E; | copy | ||
| .divide-yellow-900 | border-color: #78350F; | copy | ||
| .divide-green-50 | border-color: #ECFDF5; | copy | ||
| .divide-green-100 | border-color: #D1FAE5; | copy | ||
| .divide-green-200 | border-color: #A7F3D0; | copy | ||
| .divide-green-300 | border-color: #6EE7B7; | copy | ||
| .divide-green-400 | border-color: #34D399; | copy | ||
| .divide-green-500 | border-color: #10B981; | copy | ||
| .divide-green-600 | border-color: #059669; | copy | ||
| .divide-green-700 | border-color: #047857; | copy | ||
| .divide-green-800 | border-color: #065F46; | copy | ||
| .divide-green-900 | border-color: #064E3B; | copy | ||
| .divide-blue-50 | border-color: #EFF6FF; | copy | ||
| .divide-blue-100 | border-color: #DBEAFE; | copy | ||
| .divide-blue-200 | border-color: #BFDBFE; | copy | ||
| .divide-blue-300 | border-color: #93C5FD; | copy | ||
| .divide-blue-400 | border-color: #60A5FA; | copy | ||
| .divide-blue-500 | border-color: #3B82F6; | copy | ||
| .divide-blue-600 | border-color: #2563EB; | copy | ||
| .divide-blue-700 | border-color: #1D4ED8; | copy | ||
| .divide-blue-800 | border-color: #1E40AF; | copy | ||
| .divide-blue-900 | border-color: #1E3A8A; | copy | ||
| .divide-indigo-50 | border-color: #EEF2FF; | copy | ||
| .divide-indigo-100 | border-color: #E0E7FF; | copy | ||
| .divide-indigo-200 | border-color: #C7D2FE; | copy | ||
| .divide-indigo-300 | border-color: #A5B4FC; | copy | ||
| .divide-indigo-400 | border-color: #818CF8; | copy | ||
| .divide-indigo-500 | border-color: #6366F1; | copy | ||
| .divide-indigo-600 | border-color: #4F46E5; | copy | ||
| .divide-indigo-700 | border-color: #4338CA; | copy | ||
| .divide-indigo-800 | border-color: #3730A3; | copy | ||
| .divide-indigo-900 | border-color: #312E81; | copy | ||
| .divide-purple-50 | border-color: #F5F3FF; | copy | ||
| .divide-purple-100 | border-color: #EDE9FE; | copy | ||
| .divide-purple-200 | border-color: #DDD6FE; | copy | ||
| .divide-purple-300 | border-color: #C4B5FD; | copy | ||
| .divide-purple-400 | border-color: #A78BFA; | copy | ||
| .divide-purple-500 | border-color: #8B5CF6; | copy | ||
| .divide-purple-600 | border-color: #7C3AED; | copy | ||
| .divide-purple-700 | border-color: #6D28D9; | copy | ||
| .divide-purple-800 | border-color: #5B21B6; | copy | ||
| .divide-purple-900 | border-color: #4C1D95; | copy | ||
| .divide-pink-50 | border-color: #FDF2F8; | copy | ||
| .divide-pink-100 | border-color: #FCE7F3; | copy | ||
| .divide-pink-200 | border-color: #FBCFE8; | copy | ||
| .divide-pink-300 | border-color: #F9A8D4; | copy | ||
| .divide-pink-400 | border-color: #F472B6; | copy | ||
| .divide-pink-500 | border-color: #EC4899; | copy | ||
| .divide-pink-600 | border-color: #DB2777; | copy | ||
| .divide-pink-700 | border-color: #BE185D; | copy | ||
| .divide-pink-800 | border-color: #9D174D; | copy | ||
| .divide-pink-900 | border-color: #831843; | copy |
Set the border opacity between elements. [view docs]
| .divide-opacity-0 | --divide-opacity: 0; | copy | |
| .divide-opacity-5 | --divide-opacity: 0.05; | copy | |
| .divide-opacity-10 | --divide-opacity: 0.1; | copy | |
| .divide-opacity-20 | --divide-opacity: 0.2; | copy | |
| .divide-opacity-25 | --divide-opacity: 0.25; | copy | |
| .divide-opacity-30 | --divide-opacity: 0.3; | copy | |
| .divide-opacity-40 | --divide-opacity: 0.4; | copy | |
| .divide-opacity-50 | --divide-opacity: 0.5; | copy | |
| .divide-opacity-60 | --divide-opacity: 0.6; | copy | |
| .divide-opacity-70 | --divide-opacity: 0.7; | copy | |
| .divide-opacity-75 | --divide-opacity: 0.75; | copy | |
| .divide-opacity-80 | --divide-opacity: 0.8; | copy | |
| .divide-opacity-90 | --divide-opacity: 0.9; | copy | |
| .divide-opacity-100 | --divide-opacity: 1; | copy |
Set the border style between elements. [view docs]
| .divide-solid | border-style: solid; | copy | |
| .divide-dashed | border-style: dashed; | copy | |
| .divide-dotted | border-style: dotted; | copy | |
| .divide-double | border-style: double; | copy | |
| .divide-none | border-style: none; | copy |
Set the outline style for an element using box shadows. [view docs]
| * | box-shadow: 0 0 #000000; | copy | |
| .ring-0 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| .ring-1 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| .ring-2 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| .ring-4 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| .ring-8 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| ring | box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); | copy | |
| .ring-inset | --tw-ring-inset: inset; | copy |
Set the color of the outline styles. [view docs]
| .ring-transparent | --ring-color: transparent; | copy | ||
| .ring-current | --ring-color: currentColor; | copy | ||
| .ring-black | --ring-color: #000000; | copy | ||
| .ring-white | --ring-color: #ffffff; | copy | ||
| .ring-gray-50 | --ring-color: #F9FAFB; | copy | ||
| .ring-gray-100 | --ring-color: #F3F4F6; | copy | ||
| .ring-gray-200 | --ring-color: #E5E7EB; | copy | ||
| .ring-gray-300 | --ring-color: #D1D5DB; | copy | ||
| .ring-gray-400 | --ring-color: #9CA3AF; | copy | ||
| .ring-gray-500 | --ring-color: #6B7280; | copy | ||
| .ring-gray-600 | --ring-color: #4B5563; | copy | ||
| .ring-gray-700 | --ring-color: #374151; | copy | ||
| .ring-gray-800 | --ring-color: #1F2937; | copy | ||
| .ring-gray-900 | --ring-color: #111827; | copy | ||
| .ring-red-50 | --ring-color: #FEF2F2; | copy | ||
| .ring-red-100 | --ring-color: #FEE2E2; | copy | ||
| .ring-red-200 | --ring-color: #FECACA; | copy | ||
| .ring-red-300 | --ring-color: #FCA5A5; | copy | ||
| .ring-red-400 | --ring-color: #F87171; | copy | ||
| .ring-red-500 | --ring-color: #EF4444; | copy | ||
| .ring-red-600 | --ring-color: #DC2626; | copy | ||
| .ring-red-700 | --ring-color: #B91C1C; | copy | ||
| .ring-red-800 | --ring-color: #991B1B; | copy | ||
| .ring-red-900 | --ring-color: #7F1D1D; | copy | ||
| .ring-yellow-50 | --ring-color: #FFFBEB; | copy | ||
| .ring-yellow-100 | --ring-color: #FEF3C7; | copy | ||
| .ring-yellow-200 | --ring-color: #FDE68A; | copy | ||
| .ring-yellow-300 | --ring-color: #FCD34D; | copy | ||
| .ring-yellow-400 | --ring-color: #FBBF24; | copy | ||
| .ring-yellow-500 | --ring-color: #F59E0B; | copy | ||
| .ring-yellow-600 | --ring-color: #D97706; | copy | ||
| .ring-yellow-700 | --ring-color: #B45309; | copy | ||
| .ring-yellow-800 | --ring-color: #92400E; | copy | ||
| .ring-yellow-900 | --ring-color: #78350F; | copy | ||
| .ring-green-50 | --ring-color: #ECFDF5; | copy | ||
| .ring-green-100 | --ring-color: #D1FAE5; | copy | ||
| .ring-green-200 | --ring-color: #A7F3D0; | copy | ||
| .ring-green-300 | --ring-color: #6EE7B7; | copy | ||
| .ring-green-400 | --ring-color: #34D399; | copy | ||
| .ring-green-500 | --ring-color: #10B981; | copy | ||
| .ring-green-600 | --ring-color: #059669; | copy | ||
| .ring-green-700 | --ring-color: #047857; | copy | ||
| .ring-green-800 | --ring-color: #065F46; | copy | ||
| .ring-green-900 | --ring-color: #064E3B; | copy | ||
| .ring-blue-50 | --ring-color: #EFF6FF; | copy | ||
| .ring-blue-100 | --ring-color: #DBEAFE; | copy | ||
| .ring-blue-200 | --ring-color: #BFDBFE; | copy | ||
| .ring-blue-300 | --ring-color: #93C5FD; | copy | ||
| .ring-blue-400 | --ring-color: #60A5FA; | copy | ||
| .ring-blue-500 | --ring-color: #3B82F6; | copy | ||
| .ring-blue-600 | --ring-color: #2563EB; | copy | ||
| .ring-blue-700 | --ring-color: #1D4ED8; | copy | ||
| .ring-blue-800 | --ring-color: #1E40AF; | copy | ||
| .ring-blue-900 | --ring-color: #1E3A8A; | copy | ||
| .ring-indigo-50 | --ring-color: #EEF2FF; | copy | ||
| .ring-indigo-100 | --ring-color: #E0E7FF; | copy | ||
| .ring-indigo-200 | --ring-color: #C7D2FE; | copy | ||
| .ring-indigo-300 | --ring-color: #A5B4FC; | copy | ||
| .ring-indigo-400 | --ring-color: #818CF8; | copy | ||
| .ring-indigo-500 | --ring-color: #6366F1; | copy | ||
| .ring-indigo-600 | --ring-color: #4F46E5; | copy | ||
| .ring-indigo-700 | --ring-color: #4338CA; | copy | ||
| .ring-indigo-800 | --ring-color: #3730A3; | copy | ||
| .ring-indigo-900 | --ring-color: #312E81; | copy | ||
| .ring-purple-50 | --ring-color: #F5F3FF; | copy | ||
| .ring-purple-100 | --ring-color: #EDE9FE; | copy | ||
| .ring-purple-200 | --ring-color: #DDD6FE; | copy | ||
| .ring-purple-300 | --ring-color: #C4B5FD; | copy | ||
| .ring-purple-400 | --ring-color: #A78BFA; | copy | ||
| .ring-purple-500 | --ring-color: #8B5CF6; | copy | ||
| .ring-purple-600 | --ring-color: #7C3AED; | copy | ||
| .ring-purple-700 | --ring-color: #6D28D9; | copy | ||
| .ring-purple-800 | --ring-color: #5B21B6; | copy | ||
| .ring-purple-900 | --ring-color: #4C1D95; | copy | ||
| .ring-pink-50 | --ring-color: #FDF2F8; | copy | ||
| .ring-pink-100 | --ring-color: #FCE7F3; | copy | ||
| .ring-pink-200 | --ring-color: #FBCFE8; | copy | ||
| .ring-pink-300 | --ring-color: #F9A8D4; | copy | ||
| .ring-pink-400 | --ring-color: #F472B6; | copy | ||
| .ring-pink-500 | --ring-color: #EC4899; | copy | ||
| .ring-pink-600 | --ring-color: #DB2777; | copy | ||
| .ring-pink-700 | --ring-color: #BE185D; | copy | ||
| .ring-pink-800 | --ring-color: #9D174D; | copy | ||
| .ring-pink-900 | --ring-color: #831843; | copy |
Set the opacity of the outline style. [view docs]
| .ring-opacity-0 | --ring-opacity: 0; | copy | |
| .ring-opacity-5 | --ring-opacity: 0.05; | copy | |
| .ring-opacity-10 | --ring-opacity: 0.1; | copy | |
| .ring-opacity-20 | --ring-opacity: 0.2; | copy | |
| .ring-opacity-25 | --ring-opacity: 0.25; | copy | |
| .ring-opacity-30 | --ring-opacity: 0.3; | copy | |
| .ring-opacity-40 | --ring-opacity: 0.4; | copy | |
| .ring-opacity-50 | --ring-opacity: 0.5; | copy | |
| .ring-opacity-60 | --ring-opacity: 0.6; | copy | |
| .ring-opacity-70 | --ring-opacity: 0.7; | copy | |
| .ring-opacity-75 | --ring-opacity: 0.75; | copy | |
| .ring-opacity-80 | --ring-opacity: 0.8; | copy | |
| .ring-opacity-90 | --ring-opacity: 0.9; | copy | |
| .ring-opacity-100 | --ring-opacity: 1; | copy |
Set the width of the outline style. [view docs]
| .ring-offset-0 | --ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow); | copy | |
| .ring-offset-1 | --ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow); | copy | |
| .ring-offset-2 | --ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow); | copy | |
| .ring-offset-4 | --ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow); | copy | |
| .ring-offset-8 | --ring-offset-width: 8px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow); | copy |
Set the offset for the outline style. [view docs]
| .ring-offset-transparent | --ring-offset-color: transparent; | copy | ||
| .ring-offset-current | --ring-offset-color: currentColor; | copy | ||
| .ring-offset-black | --ring-offset-color: #000000; | copy | ||
| .ring-offset-white | --ring-offset-color: #ffffff; | copy | ||
| .ring-offset-gray-50 | --ring-offset-color: #F9FAFB; | copy | ||
| .ring-offset-gray-100 | --ring-offset-color: #F3F4F6; | copy | ||
| .ring-offset-gray-200 | --ring-offset-color: #E5E7EB; | copy | ||
| .ring-offset-gray-300 | --ring-offset-color: #D1D5DB; | copy | ||
| .ring-offset-gray-400 | --ring-offset-color: #9CA3AF; | copy | ||
| .ring-offset-gray-500 | --ring-offset-color: #6B7280; | copy | ||
| .ring-offset-gray-600 | --ring-offset-color: #4B5563; | copy | ||
| .ring-offset-gray-700 | --ring-offset-color: #374151; | copy | ||
| .ring-offset-gray-800 | --ring-offset-color: #1F2937; | copy | ||
| .ring-offset-gray-900 | --ring-offset-color: #111827; | copy | ||
| .ring-offset-red-50 | --ring-offset-color: #FEF2F2; | copy | ||
| .ring-offset-red-100 | --ring-offset-color: #FEE2E2; | copy | ||
| .ring-offset-red-200 | --ring-offset-color: #FECACA; | copy | ||
| .ring-offset-red-300 | --ring-offset-color: #FCA5A5; | copy | ||
| .ring-offset-red-400 | --ring-offset-color: #F87171; | copy | ||
| .ring-offset-red-500 | --ring-offset-color: #EF4444; | copy | ||
| .ring-offset-red-600 | --ring-offset-color: #DC2626; | copy | ||
| .ring-offset-red-700 | --ring-offset-color: #B91C1C; | copy | ||
| .ring-offset-red-800 | --ring-offset-color: #991B1B; | copy | ||
| .ring-offset-red-900 | --ring-offset-color: #7F1D1D; | copy | ||
| .ring-offset-yellow-50 | --ring-offset-color: #FFFBEB; | copy | ||
| .ring-offset-yellow-100 | --ring-offset-color: #FEF3C7; | copy | ||
| .ring-offset-yellow-200 | --ring-offset-color: #FDE68A; | copy | ||
| .ring-offset-yellow-300 | --ring-offset-color: #FCD34D; | copy | ||
| .ring-offset-yellow-400 | --ring-offset-color: #FBBF24; | copy | ||
| .ring-offset-yellow-500 | --ring-offset-color: #F59E0B; | copy | ||
| .ring-offset-yellow-600 | --ring-offset-color: #D97706; | copy | ||
| .ring-offset-yellow-700 | --ring-offset-color: #B45309; | copy | ||
| .ring-offset-yellow-800 | --ring-offset-color: #92400E; | copy | ||
| .ring-offset-yellow-900 | --ring-offset-color: #78350F; | copy | ||
| .ring-offset-green-50 | --ring-offset-color: #ECFDF5; | copy | ||
| .ring-offset-green-100 | --ring-offset-color: #D1FAE5; | copy | ||
| .ring-offset-green-200 | --ring-offset-color: #A7F3D0; | copy | ||
| .ring-offset-green-300 | --ring-offset-color: #6EE7B7; | copy | ||
| .ring-offset-green-400 | --ring-offset-color: #34D399; | copy | ||
| .ring-offset-green-500 | --ring-offset-color: #10B981; | copy | ||
| .ring-offset-green-600 | --ring-offset-color: #059669; | copy | ||
| .ring-offset-green-700 | --ring-offset-color: #047857; | copy | ||
| .ring-offset-green-800 | --ring-offset-color: #065F46; | copy | ||
| .ring-offset-green-900 | --ring-offset-color: #064E3B; | copy | ||
| .ring-offset-blue-50 | --ring-offset-color: #EFF6FF; | copy | ||
| .ring-offset-blue-100 | --ring-offset-color: #DBEAFE; | copy | ||
| .ring-offset-blue-200 | --ring-offset-color: #BFDBFE; | copy | ||
| .ring-offset-blue-300 | --ring-offset-color: #93C5FD; | copy | ||
| .ring-offset-blue-400 | --ring-offset-color: #60A5FA; | copy | ||
| .ring-offset-blue-500 | --ring-offset-color: #3B82F6; | copy | ||
| .ring-offset-blue-600 | --ring-offset-color: #2563EB; | copy | ||
| .ring-offset-blue-700 | --ring-offset-color: #1D4ED8; | copy | ||
| .ring-offset-blue-800 | --ring-offset-color: #1E40AF; | copy | ||
| .ring-offset-blue-900 | --ring-offset-color: #1E3A8A; | copy | ||
| .ring-offset-indigo-50 | --ring-offset-color: #EEF2FF; | copy | ||
| .ring-offset-indigo-100 | --ring-offset-color: #E0E7FF; | copy | ||
| .ring-offset-indigo-200 | --ring-offset-color: #C7D2FE; | copy | ||
| .ring-offset-indigo-300 | --ring-offset-color: #A5B4FC; | copy | ||
| .ring-offset-indigo-400 | --ring-offset-color: #818CF8; | copy | ||
| .ring-offset-indigo-500 | --ring-offset-color: #6366F1; | copy | ||
| .ring-offset-indigo-600 | --ring-offset-color: #4F46E5; | copy | ||
| .ring-offset-indigo-700 | --ring-offset-color: #4338CA; | copy | ||
| .ring-offset-indigo-800 | --ring-offset-color: #3730A3; | copy | ||
| .ring-offset-indigo-900 | --ring-offset-color: #312E81; | copy | ||
| .ring-offset-purple-50 | --ring-offset-color: #F5F3FF; | copy | ||
| .ring-offset-purple-100 | --ring-offset-color: #EDE9FE; | copy | ||
| .ring-offset-purple-200 | --ring-offset-color: #DDD6FE; | copy | ||
| .ring-offset-purple-300 | --ring-offset-color: #C4B5FD; | copy | ||
| .ring-offset-purple-400 | --ring-offset-color: #A78BFA; | copy | ||
| .ring-offset-purple-500 | --ring-offset-color: #8B5CF6; | copy | ||
| .ring-offset-purple-600 | --ring-offset-color: #7C3AED; | copy | ||
| .ring-offset-purple-700 | --ring-offset-color: #6D28D9; | copy | ||
| .ring-offset-purple-800 | --ring-offset-color: #5B21B6; | copy | ||
| .ring-offset-purple-900 | --ring-offset-color: #4C1D95; | copy | ||
| .ring-offset-pink-50 | --ring-offset-color: #FDF2F8; | copy | ||
| .ring-offset-pink-100 | --ring-offset-color: #FCE7F3; | copy | ||
| .ring-offset-pink-200 | --ring-offset-color: #FBCFE8; | copy | ||
| .ring-offset-pink-300 | --ring-offset-color: #F9A8D4; | copy | ||
| .ring-offset-pink-400 | --ring-offset-color: #F472B6; | copy | ||
| .ring-offset-pink-500 | --ring-offset-color: #EC4899; | copy | ||
| .ring-offset-pink-600 | --ring-offset-color: #DB2777; | copy | ||
| .ring-offset-pink-700 | --ring-offset-color: #BE185D; | copy | ||
| .ring-offset-pink-800 | --ring-offset-color: #9D174D; | copy | ||
| .ring-offset-pink-900 | --ring-offset-color: #831843; | copy |
Set whether cells inside a table have shared or separate borders. [view docs]
| .border-collapse | border-collapse: collapse; | copy | |
| .border-separate | border-collapse: separate; | copy |
Set the algorithm used to lay out table cells, rows, and columns [view docs]
| .table-auto | table-layout: auto; | copy | |
| .table-fixed | table-layout: fixed; | copy |
Display an element using platform-native styling, based on the operating system's theme. [view docs]
| .appearance-none | appearance: none; | copy |
Set the cursor style when hovering over an element. [view docs]
| .cursor-auto | cursor: auto; | copy | |
| .cursor-default | cursor: default; | copy | |
| .cursor-pointer | cursor: pointer; | copy | |
| .cursor-wait | cursor: wait; | copy | |
| .cursor-text | cursor: text; | copy | |
| .cursor-move | cursor: move; | copy | |
| .cursor-help | cursor: help; | copy | |
| .cursor-not-allowed | cursor: not-allowed; | copy |
Set the outline style of an element. [view docs]
| .outline-none | outline: 0; | copy | |
| .outline-white | outline: 2px dotted white; outline-offset: 2px; | copy | |
| .outline-black | outline: 2px dotted black; outline-offset: 2px; | copy |
Set under what circumstances a particular graphic element can become the target of pointer events. [view docs]
| .pointer-events-none | pointer-events: none; | copy | |
| .pointer-events-auto | pointer-events: auto; | copy |
Set whether an element is resizable, and if so, in which directions. [view docs]
| .resize-none | resize: none; | copy | |
| .resize | resize: both; | copy | |
| .resize-y | resize: vertical; | copy | |
| .resize-x | resize: horizontal; | copy |
Control whether the user can select text. [view docs]
| .select-none | user-select: none; | copy | |
| .select-text | user-select: text; | copy | |
| .select-all | user-select: all; | copy | |
| .select-auto | user-select: auto; | copy |
Controls whether an element is visually hidden but still accessible to screen readers. [view docs]
| .sr-only | position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); whiteSpace: nowrap; borderWidth: 0; | copy | |
| .not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; whiteSpace: normal; | copy |
Define the line names and track sizing functions. [view docs]
| .grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | copy | |
| .grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | copy | |
| .grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | copy | |
| .grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | copy | |
| .grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); | copy | |
| .grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | copy | |
| .grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); | copy | |
| .grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); | copy | |
| .grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); | copy | |
| .grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); | copy | |
| .grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); | copy | |
| .grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | copy | |
| .grid-cols-none | grid-template-columns: none; | copy |
Specify a grid item's size and location within a grid column. [view docs]
| .col-auto | grid-column: auto; | copy | |
| .col-span-1 | grid-column: span 1 / span 1; | copy | |
| .col-span-2 | grid-column: span 2 / span 2; | copy | |
| .col-span-3 | grid-column: span 3 / span 3; | copy | |
| .col-span-4 | grid-column: span 4 / span 4; | copy | |
| .col-span-5 | grid-column: span 5 / span 5; | copy | |
| .col-span-6 | grid-column: span 6 / span 6; | copy | |
| .col-span-7 | grid-column: span 7 / span 7; | copy | |
| .col-span-8 | grid-column: span 8 / span 8; | copy | |
| .col-span-9 | grid-column: span 9 / span 9; | copy | |
| .col-span-10 | grid-column: span 10 / span 10; | copy | |
| .col-span-11 | grid-column: span 11 / span 11; | copy | |
| .col-span-12 | grid-column: span 12 / span 12; | copy | |
| .col-start-1 | grid-column-start: 1; | copy | |
| .col-start-2 | grid-column-start: 2; | copy | |
| .col-start-3 | grid-column-start: 3; | copy | |
| .col-start-4 | grid-column-start: 4; | copy | |
| .col-start-5 | grid-column-start: 5; | copy | |
| .col-start-6 | grid-column-start: 6; | copy | |
| .col-start-7 | grid-column-start: 7; | copy | |
| .col-start-8 | grid-column-start: 8; | copy | |
| .col-start-9 | grid-column-start: 9; | copy | |
| .col-start-10 | grid-column-start: 10; | copy | |
| .col-start-11 | grid-column-start: 11; | copy | |
| .col-start-12 | grid-column-start: 12; | copy | |
| .col-start-13 | grid-column-start: 13; | copy | |
| .col-start-auto | grid-column-start: auto; | copy | |
| .col-end-1 | grid-column-end: 1; | copy | |
| .col-end-2 | grid-column-end: 2; | copy | |
| .col-end-3 | grid-column-end: 3; | copy | |
| .col-end-4 | grid-column-end: 4; | copy | |
| .col-end-5 | grid-column-end: 5; | copy | |
| .col-end-6 | grid-column-end: 6; | copy | |
| .col-end-7 | grid-column-end: 7; | copy | |
| .col-end-8 | grid-column-end: 8; | copy | |
| .col-end-9 | grid-column-end: 9; | copy | |
| .col-end-10 | grid-column-end: 10; | copy | |
| .col-end-11 | grid-column-end: 11; | copy | |
| .col-end-12 | grid-column-end: 12; | copy | |
| .col-end-13 | grid-column-end: 13; | copy | |
| .col-end-auto | grid-column-end: auto; | copy |
Define the line names and track sizing functions. [view docs]
| .grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); | copy | |
| .grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); | copy | |
| .grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); | copy | |
| .grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); | copy | |
| .grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); | copy | |
| .grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); | copy | |
| .grid-rows-none | grid-template-rows: none; | copy |
Specify a grid item’s size and location within the grid row. [view docs]
| .row-auto | grid-row: auto; | copy | |
| .row-span-1 | grid-row: span 1 / span 1; | copy | |
| .row-span-2 | grid-row: span 2 / span 2; | copy | |
| .row-span-3 | grid-row: span 3 / span 3; | copy | |
| .row-span-4 | grid-row: span 4 / span 4; | copy | |
| .row-span-5 | grid-row: span 5 / span 5; | copy | |
| .row-span-6 | grid-row: span 6 / span 6; | copy | |
| .row-start-1 | grid-row-start: 1; | copy | |
| .row-start-2 | grid-row-start: 2; | copy | |
| .row-start-3 | grid-row-start: 3; | copy | |
| .row-start-4 | grid-row-start: 4; | copy | |
| .row-start-5 | grid-row-start: 5; | copy | |
| .row-start-6 | grid-row-start: 6; | copy | |
| .row-start-7 | grid-row-start: 7; | copy | |
| .row-start-auto | grid-row-start: auto; | copy | |
| .row-end-1 | grid-row-end: 1; | copy | |
| .row-end-2 | grid-row-end: 2; | copy | |
| .row-end-3 | grid-row-end: 3; | copy | |
| .row-end-4 | grid-row-end: 4; | copy | |
| .row-end-5 | grid-row-end: 5; | copy | |
| .row-end-6 | grid-row-end: 6; | copy | |
| .row-end-7 | grid-row-end: 7; | copy | |
| .row-end-auto | grid-row-end: auto; | copy |
Set the gaps (gutters) between rows and columns. [view docs]
| .gap-0 | gap: 0; | copy | |
| .gap-0.5 | gap: 0.125rem; | 2px | copy |
| .gap-1 | gap: 0.25rem; | 4px | copy |
| .gap-1.5 | gap: 0.375rem; | 6px | copy |
| .gap-2 | gap: 0.5rem; | 8px | copy |
| .gap-2.5 | gap: 0.625rem; | 10px | copy |
| .gap-3 | gap: 0.75rem; | 12px | copy |
| .gap-3.5 | gap: 0.875rem; | 14px | copy |
| .gap-4 | gap: 1rem; | 16px | copy |
| .gap-5 | gap: 1.25rem; | 20px | copy |
| .gap-6 | gap: 1.5rem; | 24px | copy |
| .gap-8 | gap: 2rem; | 32px | copy |
| .gap-10 | gap: 2.5rem; | 40px | copy |
| .gap-11 | gap: 2.75rem; | 44px | copy |
| .gap-12 | gap: 3rem; | 48px | copy |
| .gap-14 | gap: 3.5rem; | 56px | copy |
| .gap-16 | gap: 4rem; | 64px | copy |
| .gap-20 | gap: 5rem; | 80px | copy |
| .gap-24 | gap: 6rem; | 96px | copy |
| .gap-28 | gap: 7rem; | 112px | copy |
| .gap-32 | gap: 8rem; | 128px | copy |
| .gap-36 | gap: 9rem; | 144px | copy |
| .gap-40 | gap: 10rem; | 160px | copy |
| .gap-44 | gap: 11rem; | 176px | copy |
| .gap-48 | gap: 12rem; | 192px | copy |
| .gap-52 | gap: 13rem; | 208px | copy |
| .gap-56 | gap: 14rem; | 224px | copy |
| .gap-64 | gap: 16rem; | 256px | copy |
| .gap-72 | gap: 18rem; | 288px | copy |
| .gap-80 | gap: 20rem; | 320px | copy |
| .gap-96 | gap: 24rem; | 384px | copy |
| .gap-px | gap: 1px; | copy | |
| .gap-x-0 | column-gap: 0; | copy | |
| .gap-x-0.5 | column-gap: 0.125rem; | 2px | copy |
| .gap-x-1 | column-gap: 0.25rem; | 4px | copy |
| .gap-x-1.5 | column-gap: 0.375rem; | 6px | copy |
| .gap-x-2 | column-gap: 0.5rem; | 8px | copy |
| .gap-x-2.5 | column-gap: 0.625rem; | 10px | copy |
| .gap-x-3 | column-gap: 0.75rem; | 12px | copy |
| .gap-x-3.5 | column-gap: 0.875rem; | 14px | copy |
| .gap-x-4 | column-gap: 1rem; | 16px | copy |
| .gap-x-5 | column-gap: 1.25rem; | 20px | copy |
| .gap-x-6 | column-gap: 1.5rem; | 24px | copy |
| .gap-x-8 | column-gap: 2rem; | 32px | copy |
| .gap-x-10 | column-gap: 2.5rem; | 40px | copy |
| .gap-x-11 | column-gap: 2.75rem; | 44px | copy |
| .gap-x-12 | column-gap: 3rem; | 48px | copy |
| .gap-x-14 | column-gap: 3.5rem; | 56px | copy |
| .gap-x-16 | column-gap: 4rem; | 64px | copy |
| .gap-x-20 | column-gap: 5rem; | 80px | copy |
| .gap-x-24 | column-gap: 6rem; | 96px | copy |
| .gap-x-28 | column-gap: 7rem; | 112px | copy |
| .gap-x-32 | column-gap: 8rem; | 128px | copy |
| .gap-x-36 | column-gap: 9rem; | 144px | copy |
| .gap-x-40 | column-gap: 10rem; | 160px | copy |
| .gap-x-44 | column-gap: 11rem; | 176px | copy |
| .gap-x-48 | column-gap: 12rem; | 192px | copy |
| .gap-x-52 | column-gap: 13rem; | 208px | copy |
| .gap-x-56 | column-gap: 14rem; | 224px | copy |
| .gap-x-64 | column-gap: 16rem; | 256px | copy |
| .gap-x-72 | column-gap: 18rem; | 288px | copy |
| .gap-x-80 | column-gap: 20rem; | 320px | copy |
| .gap-x-96 | column-gap: 24rem; | 384px | copy |
| .gap-x-px | column-gap: 1px; | copy | |
| .gap-y-0 | row-gap: 0; | copy | |
| .gap-y-0.5 | row-gap: 0.125rem; | 2px | copy |
| .gap-y-1 | row-gap: 0.25rem; | 4px | copy |
| .gap-y-1.5 | row-gap: 0.375rem; | 6px | copy |
| .gap-y-2 | row-gap: 0.5rem; | 8px | copy |
| .gap-y-2.5 | row-gap: 0.625rem; | 10px | copy |
| .gap-y-3 | row-gap: 0.75rem; | 12px | copy |
| .gap-y-3.5 | row-gap: 0.875rem; | 14px | copy |
| .gap-y-4 | row-gap: 1rem; | 16px | copy |
| .gap-y-5 | row-gap: 1.25rem; | 20px | copy |
| .gap-y-6 | row-gap: 1.5rem; | 24px | copy |
| .gap-y-8 | row-gap: 2rem; | 32px | copy |
| .gap-y-10 | row-gap: 2.5rem; | 40px | copy |
| .gap-y-11 | row-gap: 2.75rem; | 44px | copy |
| .gap-y-12 | row-gap: 3rem; | 48px | copy |
| .gap-y-14 | row-gap: 3.5rem; | 56px | copy |
| .gap-y-16 | row-gap: 4rem; | 64px | copy |
| .gap-y-20 | row-gap: 5rem; | 80px | copy |
| .gap-y-24 | row-gap: 6rem; | 96px | copy |
| .gap-y-28 | row-gap: 7rem; | 112px | copy |
| .gap-y-32 | row-gap: 8rem; | 128px | copy |
| .gap-y-36 | row-gap: 9rem; | 144px | copy |
| .gap-y-40 | row-gap: 10rem; | 160px | copy |
| .gap-y-44 | row-gap: 11rem; | 176px | copy |
| .gap-y-48 | row-gap: 12rem; | 192px | copy |
| .gap-y-52 | row-gap: 13rem; | 208px | copy |
| .gap-y-56 | row-gap: 14rem; | 224px | copy |
| .gap-y-64 | row-gap: 16rem; | 256px | copy |
| .gap-y-72 | row-gap: 18rem; | 288px | copy |
| .gap-y-80 | row-gap: 20rem; | 320px | copy |
| .gap-y-96 | row-gap: 24rem; | 384px | copy |
| .gap-y-px | row-gap: 1px; | copy |
Control how the auto-placement algorithm works. [view docs]
| .grid-flow-row | grid-auto-flow: row; | copy | |
| .grid-flow-col | grid-auto-flow: column; | copy | |
| .grid-flow-row-dense | grid-auto-flow: row dense; | copy | |
| .grid-flow-col-dense | grid-auto-flow: column dense; | copy |
Specify the size of an implicitly-created grid column. [view docs]
| .auto-cols-auto | grid-auto-columns: auto; | copy | |
| .auto-cols-min | grid-auto-columns: min; | copy | |
| .auto-cols-max | grid-auto-columns: max; | copy | |
| .auto-cols-fr | grid-auto-columns: minmax(0, 1fr); | copy |
Specify the size of an implicitly-created grid row. [view docs]
| .auto-rows-auto | grid-auto-rows: auto; | copy | |
| .auto-rows-min | grid-auto-rows: min; | copy | |
| .auto-rows-max | grid-auto-rows: max; | copy | |
| .auto-rows-fr | grid-auto-rows: minmax(0, 1fr); | copy |
Set the foreground color value of an element's text and text decorations. [view docs]
| .text-transparent | color: transparent; | copy | ||
| .text-current | color: currentColor; | copy | ||
| .text-black | color: #000000; | copy | ||
| .text-white | color: #ffffff; | copy | ||
| .text-gray-50 | color: #F9FAFB; | copy | ||
| .text-gray-100 | color: #F3F4F6; | copy | ||
| .text-gray-200 | color: #E5E7EB; | copy | ||
| .text-gray-300 | color: #D1D5DB; | copy | ||
| .text-gray-400 | color: #9CA3AF; | copy | ||
| .text-gray-500 | color: #6B7280; | copy | ||
| .text-gray-600 | color: #4B5563; | copy | ||
| .text-gray-700 | color: #374151; | copy | ||
| .text-gray-800 | color: #1F2937; | copy | ||
| .text-gray-900 | color: #111827; | copy | ||
| .text-red-50 | color: #FEF2F2; | copy | ||
| .text-red-100 | color: #FEE2E2; | copy | ||
| .text-red-200 | color: #FECACA; | copy | ||
| .text-red-300 | color: #FCA5A5; | copy | ||
| .text-red-400 | color: #F87171; | copy | ||
| .text-red-500 | color: #EF4444; | copy | ||
| .text-red-600 | color: #DC2626; | copy | ||
| .text-red-700 | color: #B91C1C; | copy | ||
| .text-red-800 | color: #991B1B; | copy | ||
| .text-red-900 | color: #7F1D1D; | copy | ||
| .text-yellow-50 | color: #FFFBEB; | copy | ||
| .text-yellow-100 | color: #FEF3C7; | copy | ||
| .text-yellow-200 | color: #FDE68A; | copy | ||
| .text-yellow-300 | color: #FCD34D; | copy | ||
| .text-yellow-400 | color: #FBBF24; | copy | ||
| .text-yellow-500 | color: #F59E0B; | copy | ||
| .text-yellow-600 | color: #D97706; | copy | ||
| .text-yellow-700 | color: #B45309; | copy | ||
| .text-yellow-800 | color: #92400E; | copy | ||
| .text-yellow-900 | color: #78350F; | copy | ||
| .text-green-50 | color: #ECFDF5; | copy | ||
| .text-green-100 | color: #D1FAE5; | copy | ||
| .text-green-200 | color: #A7F3D0; | copy | ||
| .text-green-300 | color: #6EE7B7; | copy | ||
| .text-green-400 | color: #34D399; | copy | ||
| .text-green-500 | color: #10B981; | copy | ||
| .text-green-600 | color: #059669; | copy | ||
| .text-green-700 | color: #047857; | copy | ||
| .text-green-800 | color: #065F46; | copy | ||
| .text-green-900 | color: #064E3B; | copy | ||
| .text-blue-50 | color: #EFF6FF; | copy | ||
| .text-blue-100 | color: #DBEAFE; | copy | ||
| .text-blue-200 | color: #BFDBFE; | copy | ||
| .text-blue-300 | color: #93C5FD; | copy | ||
| .text-blue-400 | color: #60A5FA; | copy | ||
| .text-blue-500 | color: #3B82F6; | copy | ||
| .text-blue-600 | color: #2563EB; | copy | ||
| .text-blue-700 | color: #1D4ED8; | copy | ||
| .text-blue-800 | color: #1E40AF; | copy | ||
| .text-blue-900 | color: #1E3A8A; | copy | ||
| .text-indigo-50 | color: #EEF2FF; | copy | ||
| .text-indigo-100 | color: #E0E7FF; | copy | ||
| .text-indigo-200 | color: #C7D2FE; | copy | ||
| .text-indigo-300 | color: #A5B4FC; | copy | ||
| .text-indigo-400 | color: #818CF8; | copy | ||
| .text-indigo-500 | color: #6366F1; | copy | ||
| .text-indigo-600 | color: #4F46E5; | copy | ||
| .text-indigo-700 | color: #4338CA; | copy | ||
| .text-indigo-800 | color: #3730A3; | copy | ||
| .text-indigo-900 | color: #312E81; | copy | ||
| .text-purple-50 | color: #F5F3FF; | copy | ||
| .text-purple-100 | color: #EDE9FE; | copy | ||
| .text-purple-200 | color: #DDD6FE; | copy | ||
| .text-purple-300 | color: #C4B5FD; | copy | ||
| .text-purple-400 | color: #A78BFA; | copy | ||
| .text-purple-500 | color: #8B5CF6; | copy | ||
| .text-purple-600 | color: #7C3AED; | copy | ||
| .text-purple-700 | color: #6D28D9; | copy | ||
| .text-purple-800 | color: #5B21B6; | copy | ||
| .text-purple-900 | color: #4C1D95; | copy | ||
| .text-pink-50 | color: #FDF2F8; | copy | ||
| .text-pink-100 | color: #FCE7F3; | copy | ||
| .text-pink-200 | color: #FBCFE8; | copy | ||
| .text-pink-300 | color: #F9A8D4; | copy | ||
| .text-pink-400 | color: #F472B6; | copy | ||
| .text-pink-500 | color: #EC4899; | copy | ||
| .text-pink-600 | color: #DB2777; | copy | ||
| .text-pink-700 | color: #BE185D; | copy | ||
| .text-pink-800 | color: #9D174D; | copy | ||
| .text-pink-900 | color: #831843; | copy |
Set the opacity of a text element. [view docs]
| .text-opacity-0 | text-opacity: 0; | copy | |
| .text-opacity-5 | text-opacity: 0.05; | copy | |
| .text-opacity-10 | text-opacity: 0.1; | copy | |
| .text-opacity-20 | text-opacity: 0.2; | copy | |
| .text-opacity-25 | text-opacity: 0.25; | copy | |
| .text-opacity-30 | text-opacity: 0.3; | copy | |
| .text-opacity-40 | text-opacity: 0.4; | copy | |
| .text-opacity-50 | text-opacity: 0.5; | copy | |
| .text-opacity-60 | text-opacity: 0.6; | copy | |
| .text-opacity-70 | text-opacity: 0.7; | copy | |
| .text-opacity-75 | text-opacity: 0.75; | copy | |
| .text-opacity-80 | text-opacity: 0.8; | copy | |
| .text-opacity-90 | text-opacity: 0.9; | copy | |
| .text-opacity-100 | text-opacity: 1; | copy |
Specify a prioritized list of one or more font family names and/or generic family names for the selected element. [view docs]
| .font-sans | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | copy | |
| .font-serif | font-family: Georgia, Cambria, "Times New Roman", Times, serif; | copy | |
| .font-mono | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | copy |
Set the size of the font. [view docs]
| .text-xs | font-size: 0.75rem; line-height: 1rem; | 12px | copy |
| .text-sm | font-size: 0.875rem; line-height: 1.25rem; | 14px | copy |
| .text-base | font-size: 1rem; line-height: 1.5rem; | 16px | copy |
| .text-lg | font-size: 1.125rem; line-height: 1.75rem; | 18px | copy |
| .text-xl | font-size: 1.25rem; line-height: 1.75rem; | 20px | copy |
| .text-2xl | font-size: 1.5rem; line-height: 2rem; | 24px | copy |
| .text-3xl | font-size: 1.875rem; line-height: 2.25rem; | 30px | copy |
| .text-4xl | font-size: 2.25rem; line-height: 2.5rem; | 36px | copy |
| .text-5xl | font-size: 3rem; line-height: 1; | 48px | copy |
| .text-6xl | font-size: 3.75rem; line-height: 1; | 64px | copy |
| .text-7xl | font-size: 4.5rem; line-height: 1; | 72px | copy |
| .text-8xl | font-size: 6rem; line-height: 1; | 80px | copy |
| .text-9xl | font-size: 8rem; line-height: 1; | 96px | copy |
Control the application of anti-aliasing when fonts are rendered. [view docs]
| .antialiased | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; | copy | |
| .subpixel-antialiased | -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; | copy |
Set whether a font should be styled with a normal, italic, or oblique face from its font-family. [view docs]
| .italic | font-style: italic; | copy | |
| .not-italic | font-style: normal; | copy |
Set the weight (or boldness) of the font. The weights available depend on the font-family that is currently set. [view docs]
| .font-thin | font-weight: 100; | copy | |
| .font-extralight | font-weight: 200; | copy | |
| .font-light | font-weight: 300; | copy | |
| .font-normal | font-weight: 400; | copy | |
| .font-medium | font-weight: 500; | copy | |
| .font-semibold | font-weight: 600; | copy | |
| .font-bold | font-weight: 700; | copy | |
| .font-extrabold | font-weight: 800; | copy | |
| .font-black | font-weight: 900; | copy |
Control the usage of alternate glyphs for numbers, fractions, and ordinal markers. [view docs]
| .normal-nums | font-variant-numeric: normal; | copy | |
| .ordinal | font-variant-numeric: ordinal; | copy | |
| .slashed-zero | font-variant-numeric: slashed-zero; | copy | |
| .lining-nums | font-variant-numeric: lining-nums; | copy | |
| .oldstyle-nums | font-variant-numeric: oldstyle-nums; | copy | |
| .proportional-nums | font-variant-numeric: proportional-nums; | copy | |
| .tabular-nums | font-variant-numeric: tabular-nums; | copy | |
| .diagonal-fractions | font-variant-numeric: diagonal-fractions; | copy | |
| .stacked-fractions | font-variant-numeric: stacked-fractions; | copy |
Set the horizontal spacing behavior between text characters. [view docs]
| .tracking-tighter | letter-spacing: -0.05em; | copy | |
| .tracking-tight | letter-spacing: -0.025em; | copy | |
| .tracking-normal | letter-spacing: 0; | copy | |
| .tracking-wide | letter-spacing: 0.025em; | copy | |
| .tracking-wider | letter-spacing: 0.05em; | copy | |
| .tracking-widest | letter-spacing: 0.1em; | copy |
Set the height of a line box. [view docs]
| .leading-none | line-height: 1; | copy | |
| .leading-tight | line-height: 1.25; | copy | |
| .leading-snug | line-height: 1.375; | copy | |
| .leading-normal | line-height: 1.5; | copy | |
| .leading-relaxed | line-height: 1.625; | copy | |
| .leading-loose | line-height: 2; | copy | |
| .leading-3 | line-height: .75rem; | 12px | copy |
| .leading-4 | line-height: 1rem; | 16px | copy |
| .leading-5 | line-height: 1.25rem; | 20px | copy |
| .leading-6 | line-height: 1.5rem; | 24px | copy |
| .leading-7 | line-height: 1.75rem; | 28px | copy |
| .leading-8 | line-height: 2rem; | 32px | copy |
| .leading-9 | line-height: 2.25rem; | 36px | copy |
| .leading-10 | line-height: 2.5rem; | 40px | copy |
Set the marker (such as a disc, character, or custom counter style) of a list item element. [view docs]
| .list-none | list-style-type: none; | copy | |
| .list-disc | list-style-type: disc; | copy | |
| .list-decimal | list-style-type: decimal; | copy |
Set the position of the marker relative to a list item. [view docs]
| .list-inside | list-style-position: inside; | copy | |
| .list-outside | list-style-position: outside; | copy |
Set the color of the placeholder using the ::placeholder pseudo element. [view docs]
| .placeholder-transparent | color: transparent; | copy | ||
| .placeholder-current | color: currentColor; | copy | ||
| .placeholder-black | color: #000000; | copy | ||
| .placeholder-white | color: #ffffff; | copy | ||
| .placeholder-gray-50 | color: #F9FAFB; | copy | ||
| .placeholder-gray-100 | color: #F3F4F6; | copy | ||
| .placeholder-gray-200 | color: #E5E7EB; | copy | ||
| .placeholder-gray-300 | color: #D1D5DB; | copy | ||
| .placeholder-gray-400 | color: #9CA3AF; | copy | ||
| .placeholder-gray-500 | color: #6B7280; | copy | ||
| .placeholder-gray-600 | color: #4B5563; | copy | ||
| .placeholder-gray-700 | color: #374151; | copy | ||
| .placeholder-gray-800 | color: #1F2937; | copy | ||
| .placeholder-gray-900 | color: #111827; | copy | ||
| .placeholder-red-50 | color: #FEF2F2; | copy | ||
| .placeholder-red-100 | color: #FEE2E2; | copy | ||
| .placeholder-red-200 | color: #FECACA; | copy | ||
| .placeholder-red-300 | color: #FCA5A5; | copy | ||
| .placeholder-red-400 | color: #F87171; | copy | ||
| .placeholder-red-500 | color: #EF4444; | copy | ||
| .placeholder-red-600 | color: #DC2626; | copy | ||
| .placeholder-red-700 | color: #B91C1C; | copy | ||
| .placeholder-red-800 | color: #991B1B; | copy | ||
| .placeholder-red-900 | color: #7F1D1D; | copy | ||
| .placeholder-yellow-50 | color: #FFFBEB; | copy | ||
| .placeholder-yellow-100 | color: #FEF3C7; | copy | ||
| .placeholder-yellow-200 | color: #FDE68A; | copy | ||
| .placeholder-yellow-300 | color: #FCD34D; | copy | ||
| .placeholder-yellow-400 | color: #FBBF24; | copy | ||
| .placeholder-yellow-500 | color: #F59E0B; | copy | ||
| .placeholder-yellow-600 | color: #D97706; | copy | ||
| .placeholder-yellow-700 | color: #B45309; | copy | ||
| .placeholder-yellow-800 | color: #92400E; | copy | ||
| .placeholder-yellow-900 | color: #78350F; | copy | ||
| .placeholder-green-50 | color: #ECFDF5; | copy | ||
| .placeholder-green-100 | color: #D1FAE5; | copy | ||
| .placeholder-green-200 | color: #A7F3D0; | copy | ||
| .placeholder-green-300 | color: #6EE7B7; | copy | ||
| .placeholder-green-400 | color: #34D399; | copy | ||
| .placeholder-green-500 | color: #10B981; | copy | ||
| .placeholder-green-600 | color: #059669; | copy | ||
| .placeholder-green-700 | color: #047857; | copy | ||
| .placeholder-green-800 | color: #065F46; | copy | ||
| .placeholder-green-900 | color: #064E3B; | copy | ||
| .placeholder-blue-50 | color: #EFF6FF; | copy | ||
| .placeholder-blue-100 | color: #DBEAFE; | copy | ||
| .placeholder-blue-200 | color: #BFDBFE; | copy | ||
| .placeholder-blue-300 | color: #93C5FD; | copy | ||
| .placeholder-blue-400 | color: #60A5FA; | copy | ||
| .placeholder-blue-500 | color: #3B82F6; | copy | ||
| .placeholder-blue-600 | color: #2563EB; | copy | ||
| .placeholder-blue-700 | color: #1D4ED8; | copy | ||
| .placeholder-blue-800 | color: #1E40AF; | copy | ||
| .placeholder-blue-900 | color: #1E3A8A; | copy | ||
| .placeholder-indigo-50 | color: #EEF2FF; | copy | ||
| .placeholder-indigo-100 | color: #E0E7FF; | copy | ||
| .placeholder-indigo-200 | color: #C7D2FE; | copy | ||
| .placeholder-indigo-300 | color: #A5B4FC; | copy | ||
| .placeholder-indigo-400 | color: #818CF8; | copy | ||
| .placeholder-indigo-500 | color: #6366F1; | copy | ||
| .placeholder-indigo-600 | color: #4F46E5; | copy | ||
| .placeholder-indigo-700 | color: #4338CA; | copy | ||
| .placeholder-indigo-800 | color: #3730A3; | copy | ||
| .placeholder-indigo-900 | color: #312E81; | copy | ||
| .placeholder-purple-50 | color: #F5F3FF; | copy | ||
| .placeholder-purple-100 | color: #EDE9FE; | copy | ||
| .placeholder-purple-200 | color: #DDD6FE; | copy | ||
| .placeholder-purple-300 | color: #C4B5FD; | copy | ||
| .placeholder-purple-400 | color: #A78BFA; | copy | ||
| .placeholder-purple-500 | color: #8B5CF6; | copy | ||
| .placeholder-purple-600 | color: #7C3AED; | copy | ||
| .placeholder-purple-700 | color: #6D28D9; | copy | ||
| .placeholder-purple-800 | color: #5B21B6; | copy | ||
| .placeholder-purple-900 | color: #4C1D95; | copy | ||
| .placeholder-pink-50 | color: #FDF2F8; | copy | ||
| .placeholder-pink-100 | color: #FCE7F3; | copy | ||
| .placeholder-pink-200 | color: #FBCFE8; | copy | ||
| .placeholder-pink-300 | color: #F9A8D4; | copy | ||
| .placeholder-pink-400 | color: #F472B6; | copy | ||
| .placeholder-pink-500 | color: #EC4899; | copy | ||
| .placeholder-pink-600 | color: #DB2777; | copy | ||
| .placeholder-pink-700 | color: #BE185D; | copy | ||
| .placeholder-pink-800 | color: #9D174D; | copy | ||
| .placeholder-pink-900 | color: #831843; | copy |
Set the opacity of the placeholder using the ::placeholder pseudo element. [view docs]
| .placeholder-opacity-0 | placeholder-opacity: 0; | copy | |
| .placeholder-opacity-5 | placeholder-opacity: 0.05; | copy | |
| .placeholder-opacity-10 | placeholder-opacity: 0.1; | copy | |
| .placeholder-opacity-20 | placeholder-opacity: 0.2; | copy | |
| .placeholder-opacity-25 | placeholder-opacity: 0.25; | copy | |
| .placeholder-opacity-30 | placeholder-opacity: 0.3; | copy | |
| .placeholder-opacity-40 | placeholder-opacity: 0.4; | copy | |
| .placeholder-opacity-50 | placeholder-opacity: 0.5; | copy | |
| .placeholder-opacity-60 | placeholder-opacity: 0.6; | copy | |
| .placeholder-opacity-70 | placeholder-opacity: 0.7; | copy | |
| .placeholder-opacity-75 | placeholder-opacity: 0.75; | copy | |
| .placeholder-opacity-80 | placeholder-opacity: 0.8; | copy | |
| .placeholder-opacity-90 | placeholder-opacity: 0.9; | copy | |
| .placeholder-opacity-100 | placeholder-opacity: 1; | copy |
Set the horizontal alignment of the content inside a block element or table-cell box. [view docs]
| .text-left | text-align: left; | copy | |
| .text-center | text-align: center; | copy | |
| .text-right | text-align: right; | copy | |
| .text-justify | text-align: justify; | copy |
Set the appearance of decorative lines on text. [view docs]
| .underline | text-decoration: underline; | copy | |
| .line-through | text-decoration: line-through; | copy | |
| .no-underline | text-decoration: none; | copy |
Specify how to capitalize an element's text. [view docs]
| .uppercase | text-transform: uppercase; | copy | |
| .lowercase | text-transform: lowercase; | copy | |
| .capitalize | text-transform: capitalize; | copy | |
| .normal-case | text-transform: none; | copy |
Set how hidden overflow content is signaled to users. [view docs]
| .truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | copy | |
| .overflow-ellipsis | text-overflow: ellipsis; | copy | |
| .overflow-clip | text-overflow: clip; | copy |
Set the vertical alignment of an inline, inline-block or table-cell box. [view docs]
| .align-baseline | vertical-align: baseline; | copy | |
| .align-top | vertical-align: top; | copy | |
| .align-middle | vertical-align: middle; | copy | |
| .align-bottom | vertical-align: bottom; | copy | |
| .align-text-top | vertical-align: text-top; | copy | |
| .align-text-bottom | vertical-align: text-bottom; | copy |
Set how white space inside an element is handled. [view docs]
| .whitespace-normal | white-space: normal; | copy | |
| .whitespace-nowrap | white-space: nowrap; | copy | |
| .whitespace-pre | white-space: pre; | copy | |
| .whitespace-pre-line | white-space: pre-line; | copy | |
| .whitespace-pre-wrap | white-space: pre-wrap; | copy |
Set whether line breaks appear wherever the text would otherwise overflow its content box. [view docs]
| .break-normal | overflow-wrap: normal; word-break: normal; | copy | |
| .break-words | overflow-wrap: break-word; | copy | |
| .break-all | word-break: break-all; | copy |
Add shadow effects around an element's frame. [view docs]
| .shadow-xs | copy | ||
| .shadow-sm | copy | ||
| .shadow | copy | ||
| .shadow-md | copy | ||
| .shadow-lg | copy | ||
| .shadow-xl | copy | ||
| .shadow-2xl | copy | ||
| .shadow-inner | copy | ||
| .shadow-outline | copy | ||
| .shadow-none | box-shadow: none; | copy |
Set the opacity of an element. [view docs]
| .opacity-0 | opacity: 0; | copy | |
| .opacity-5 | opacity: 0.05; | copy | |
| .opacity-10 | opacity: 0.1; | copy | |
| .opacity-20 | opacity: 0.2; | copy | |
| .opacity-25 | opacity: 0.25; | copy | |
| .opacity-30 | opacity: 0.3; | copy | |
| .opacity-40 | opacity: 0.4; | copy | |
| .opacity-50 | opacity: 0.5; | copy | |
| .opacity-60 | opacity: 0.6; | copy | |
| .opacity-70 | opacity: 0.7; | copy | |
| .opacity-75 | opacity: 0.75; | copy | |
| .opacity-80 | opacity: 0.8; | copy | |
| .opacity-90 | opacity: 0.9; | copy | |
| .opacity-100 | opacity: 1; | copy |
Set how an element's content should blend with the content of the element's parent and the element's background. [view docs]
| .mix-blend-normal | mix-blend-mode: normal; | copy | |
| .mix-blend-multiply | mix-blend-mode: multiply; | copy | |
| .mix-blend-screen | mix-blend-mode: screen; | copy | |
| .mix-blend-overlay | mix-blend-mode: overlay; | copy | |
| .mix-blend-darken | mix-blend-mode: darken; | copy | |
| .mix-blend-lighten | mix-blend-mode: lighten; | copy | |
| .mix-blend-color-dodge | mix-blend-mode: color-dodge; | copy | |
| .mix-blend-color-burn | mix-blend-mode: color-burn; | copy | |
| .mix-blend-hard-light | mix-blend-mode: hard-light; | copy | |
| .mix-blend-soft-light | mix-blend-mode: soft-light; | copy | |
| .mix-blend-difference | mix-blend-mode: difference; | copy | |
| .mix-blend-exclusion | mix-blend-mode: exclusion; | copy | |
| .mix-blend-hue | mix-blend-mode: hue; | copy | |
| .mix-blend-saturation | mix-blend-mode: saturation; | copy | |
| .mix-blend-color | mix-blend-mode: color; | copy | |
| .mix-blend-luminosity | mix-blend-mode: luminosity; | copy |
Set how an element's background images should blend with each other and with the element's background color. [view docs]
| .bg-blend-normal | background-blend-mode: normal; | copy | |
| .bg-blend-multiply | background-blend-mode: multiply; | copy | |
| .bg-blend-screen | background-blend-mode: screen; | copy | |
| .bg-blend-overlay | background-blend-mode: overlay; | copy | |
| .bg-blend-darken | background-blend-mode: darken; | copy | |
| .bg-blend-lighten | background-blend-mode: lighten; | copy | |
| .bg-blend-color-dodge | background-blend-mode: color-dodge; | copy | |
| .bg-blend-color-burn | background-blend-mode: color-burn; | copy | |
| .bg-blend-hard-light | background-blend-mode: hard-light; | copy | |
| .bg-blend-soft-light | background-blend-mode: soft-light; | copy | |
| .bg-blend-difference | background-blend-mode: difference; | copy | |
| .bg-blend-exclusion | background-blend-mode: exclusion; | copy | |
| .bg-blend-hue | background-blend-mode: hue; | copy | |
| .bg-blend-saturation | background-blend-mode: saturation; | copy | |
| .bg-blend-color | background-blend-mode: color; | copy | |
| .bg-blend-luminosity | background-blend-mode: luminosity; | copy |
Specify the duration to wait before starting a property's transition effect when its value changes. [view docs]
| .delay-75 | transition-delay: 75ms; | copy | |
| .delay-100 | transition-delay: 100ms; | copy | |
| .delay-150 | transition-delay: 150ms; | copy | |
| .delay-200 | transition-delay: 200ms; | copy | |
| .delay-300 | transition-delay: 300ms; | copy | |
| .delay-500 | transition-delay: 500ms; | copy | |
| .delay-700 | transition-delay: 700ms; | copy | |
| .delay-1000 | transition-delay: 1000ms; | copy |
Set the CSS properties to which a transition effect should be applied. [view docs]
| .transition | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; | copy | |
| .transition-none | transition-property: none; | copy | |
| .transition-all | transition-property: all; | copy | |
| .transition-colors | transition-property: background-color, border-color, color, fill, stroke; | copy | |
| .transition-opacity | transition-property: opacity; | copy | |
| .transition-shadow | transition-property: box-shadow; | copy | |
| .transition-transform | transition-property: transform; | copy |
Set the length of time a transition animation should take to complete. [view docs]
| .duration-75 | transition-duration: 75ms; | copy | |
| .duration-100 | transition-duration: 100ms; | copy | |
| .duration-150 | transition-duration: 150ms; | copy | |
| .duration-200 | transition-duration: 200ms; | copy | |
| .duration-300 | transition-duration: 300ms; | copy | |
| .duration-500 | transition-duration: 500ms; | copy | |
| .duration-700 | transition-duration: 700ms; | copy | |
| .duration-1000 | transition-duration: 1000ms; | copy |
Set how intermediate values are calculated for CSS properties being affected by a transition effect. [view docs]
| .ease-linear | transition-timing-function: linear; | copy | |
| .ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); | copy | |
| .ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); | copy | |
| .ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | copy |
Apply an animation between styles. [view docs]
| .animate-none | animation: none; | copy | |
| .animate-spin | animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | copy | |
| .animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } | copy | |
| .animate-pulse | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } | copy | |
| .animate-bounce | animation: animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } } | copy |
Define the color of an SVG object. [view docs]
| .fill-current | fill: currentColor; | copy |
Define the stroke color of an SVG object. [view docs]
| .stroke-current | stroke: currentColor; | copy |
Set the stroke width of an SVG object. [view docs]
| .stroke-0 | stroke-width: 0; | copy | |
| .stroke-1 | stroke-width: 1; | copy | |
| .stroke-2 | stroke-width: 2; | copy |