Tailwind CSS Cheat Sheet

Apply the max-width of an element to fix its width to the current breakpoint.

.containernonewidth: 100%sm:max-width: 640px;md:max-width: 768px;lg:max-width: 1024px;xl:max-width: 1280px;2xl:max-width: 1536px;

Set how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

.decoration-slicebox-decoration-break: slice;.decoration-clonebox-decoration-break: clone;

Define how the width and height of an element are calculated: should they include padding and borders, or not.

.box-borderbox-sizing: border-box;.box-contentbox-sizing: content-box;

Use the breakpoints (screen sizes) to set how the utility-classes respond according to the device width.

sm:@media (min-width: 640px) { ... }md:@media (min-width: 768px) { ... }lg:@media (min-width: 1024px) { ... }xl:@media (min-width: 1280px) { ... }2xl:@media (min-width: 1536px) { ... }

Specify the display behavior (the type of rendering box) of an element.

.hiddendisplay: none;.contentsdisplay: contents;.list-itemdisplay: list-item;.blockdisplay: block;.inline-blockdisplay: inline-block;.flexdisplay: flex;.inline-flexdisplay: inline-flex;.inlinedisplay: inline;.tabledisplay: table;.inline-tabledisplay: inline-table;.table-celldisplay: table-cell;.table-captiondisplay: table-caption;.table-columndisplay: table-column;.table-column-groupdisplay: table-column-group;.table-footer-groupdisplay: table-footer-group;.table-header-groupdisplay: table-header-group;.table-row-groupdisplay: table-row-group;.table-rowdisplay: table-row;.flow-rootdisplay: flow-root.griddisplay: grid.inline-griddisplay: inline-grid

Place an element on the left or right side of its container, allowing text and inline elements to wrap around it.

.float-rightfloat: right;.float-leftfloat: left;.float-nonefloat: none;

Set whether an element must be moved below (cleared) floating elements that precede it.

.clear-leftclear: left;.clear-rightclear: right;.clear-bothclear: both;.clear-noneclear: none;

Determine whether an element must create a new stacking context.

.isolateisolation: isolate;.isolate-autoisolation: auto;

Set how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

.object-containobject-fit: contain;.object-coverobject-fit: cover;.object-fillobject-fit: fill;.object-noneobject-fit: none;.object-scale-downobject-fit: scale-down;

Specify the alignment of the selected replaced element's contents within the element's box.

.object-bottomobject-position: bottom;.object-centerobject-position: center;.object-leftobject-position: left;.object-left-bottomobject-position: left bottom;.object-left-topobject-position: left top;.object-rightobject-position: right;.object-right-bottomobject-position: right bottom;.object-right-topobject-position: right top;.object-topobject-position: top;

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.

.overflow-autooverflow: auto;.overflow-x-autooverflow-x: auto;.overflow-y-autooverflow-y: auto;.overflow-hiddenoverflow: hidden;.overflow-x-hiddenoverflow-x: hidden;.overflow-y-hiddenoverflow-y: hidden;.overflow-visibleoverflow: visible;.overflow-x-visibleoverflow-x: visible;.overflow-y-visibleoverflow-y: visible;.overflow-scrolloverflow: scroll;.overflow-x-scrolloverflow-x: scroll;.overflow-y-scrolloverflow-y: scroll;.scrolling-touch-webkit-overflow-scrolling: touch;.scrolling-auto-webkit-overflow-scrolling: auto;

Set what a browser does when reaching the boundary of a scrolling area.

.overscroll-autooverscroll-behavior: auto;.overscroll-y-autooverscroll-behavior-y: auto;.overscroll-x-autooverscroll-behavior-x: auto;.overscroll-containoverscroll-behavior: contain;.overscroll-y-containoverscroll-behavior-y: contain;.overscroll-x-containoverscroll-behavior-x: contain;.overscroll-noneoverscroll-behavior: none;.overscroll-y-noneoverscroll-behavior-y: none;.overscroll-x-noneoverscroll-behavior-x: none;

Set how an element is positioned in a document.

.staticposition: static;.fixedposition: fixed;.absoluteposition: absolute;.relativeposition: relative;.stickyposition: sticky;

Determine the final location of positioned elements.

.inset-0top: 0; right: 0; bottom: 0; left: 0;.-inset-0top: 0; right: 0; bottom: 0; left: 0;.inset-y-0top: 0; bottom: 0;.-inset-y-0top: 0; bottom: 0;.inset-x-0right: 0; left: 0;.-inset-x-0right: 0; left: 0;.top-0top: 0;.right-0right: 0;.bottom-0bottom: 0;.left-0left: 0;.-top-0top: 0;.-right-0right: 0;.-bottom-0bottom: 0;.-left-0left: 0;.inset-0.5top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem;.-inset-0.5top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem;.inset-y-0.5top: 0.125rem; bottom: 0.125rem;.-inset-y-0.5top: -0.125rem; bottom: -0.125rem;.inset-x-0.5right: 0.125rem; left: 0.125rem;.-inset-x-0.5right: -0.125rem; left: -0.125rem;.top-0.5top: 0.125rem;.right-0.5right: 0.125rem;.bottom-0.5bottom: 0.125rem;.left-0.5left: 0.125rem;.-top-0.5top: -0.125rem;.-right-0.5right: -0.125rem;.-bottom-0.5bottom: -0.125rem;.-left-0.5left: -0.125rem;.inset-1top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;.-inset-1top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem;.inset-y-1top: 0.25rem; bottom: 0.25rem;.-inset-y-1top: -0.25rem; bottom: -0.25rem;.inset-x-1right: 0.25rem; left: 0.25rem;.-inset-x-1right: -0.25rem; left: -0.25rem;.top-1top: 0.25rem;.right-1right: 0.25rem;.bottom-1bottom: 0.25rem;.left-1left: 0.25rem;.-top-1top: -0.25rem;.-right-1right: -0.25rem;.-bottom-1bottom: -0.25rem;.-left-1left: -0.25rem;.inset-1.5top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem;.-inset-1.5top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem;.inset-y-1.5top: 0.375rem; bottom: 0.375rem;.-inset-y-1.5top: -0.375rem; bottom: -0.375rem;.inset-x-1.5right: 0.375rem; left: 0.375rem;.-inset-x-1.5right: -0.375rem; left: -0.375rem;.top-1.5top: 0.375rem;.right-1.5right: 0.375rem;.bottom-1.5bottom: 0.375rem;.left-1.5left: 0.375rem;.-top-1.5top: -0.375rem;.-right-1.5right: -0.375rem;.-bottom-1.5bottom: -0.375rem;.-left-1.5left: -0.375rem;.inset-2top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem;.-inset-2top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem;.inset-y-2top: 0.5rem; bottom: 0.5rem;.-inset-y-2top: -0.5rem; bottom: -0.5rem;.inset-x-2right: 0.5rem; left: 0.5rem;.-inset-x-2right: -0.5rem; left: -0.5rem;.top-2top: 0.5rem;.right-2right: 0.5rem;.bottom-2bottom: 0.5rem;.left-2left: 0.5rem;.-top-2top: -0.5rem;.-right-2right: -0.5rem;.-bottom-2bottom: -0.5rem;.-left-2left: -0.5rem;.inset-2.5top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem;.-inset-2.5top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem;.inset-y-2.5top: 0.625rem; bottom: 0.625rem;.-inset-y-2.5top: -0.625rem; bottom: -0.625rem;.inset-x-2.5right: 0.625rem; left: 0.625rem;.-inset-x-2.5right: -0.625rem; left: -0.625rem;.top-2.5top: 0.625rem;.right-2.5right: 0.625rem;.bottom-2.5bottom: 0.625rem;.left-2.5left: 0.625rem;.-top-2.5top: -0.625rem;.-right-2.5right: -0.625rem;.-bottom-2.5bottom: -0.625rem;.-left-2.5left: -0.625rem;.inset-3top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem;.-inset-3top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem;.inset-y-3top: 0.75rem; bottom: 0.75rem;.-inset-y-3top: -0.75rem; bottom: -0.75rem;.inset-x-3right: 0.75rem; left: 0.75rem;.-inset-x-3right: -0.75rem; left: -0.75rem;.top-3top: 0.75rem;.right-3right: 0.75rem;.bottom-3bottom: 0.75rem;.left-3left: 0.75rem;.-top-3top: -0.75rem;.-right-3right: -0.75rem;.-bottom-3bottom: -0.75rem;.-left-3left: -0.75rem;.inset-3.5top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem;.-inset-3.5top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem;.inset-y-3.5top: 0.875rem; bottom: 0.875rem;.-inset-y-3.5top: -0.875rem; bottom: -0.875rem;.inset-x-3.5right: 0.875rem; left: 0.875rem;.-inset-x-3.5right: -0.875rem; left: -0.875rem;.top-3.5top: 0.875rem;.right-3.5right: 0.875rem;.bottom-3.5bottom: 0.875rem;.left-3.5left: 0.875rem;.-top-3.5top: -0.875rem;.-right-3.5right: -0.875rem;.-bottom-3.5bottom: -0.875rem;.-left-3.5left: -0.875rem;.inset-4top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;.-inset-4top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;.inset-y-4top: 1rem; bottom: 1rem;.-inset-y-4top: -1rem; bottom: -1rem;.inset-x-4right: 1rem; left: 1rem;.-inset-x-4right: -1rem; left: -1rem;.top-4top: 1rem;.right-4right: 1rem;.bottom-4bottom: 1rem;.left-4left: 1rem;.-top-4top: -1rem;.-right-4right: -1rem;.-bottom-4bottom: -1rem;.-left-4left: -1rem;.inset-5top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem;.-inset-5top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem;.inset-y-5top: 1.25rem; bottom: 1.25rem;.-inset-y-5top: -1.25rem; bottom: -1.25rem;.inset-x-5right: 1.25rem; left: 1.25rem;.-inset-x-5right: -1.25rem; left: -1.25rem;.top-5top: 1.25rem;.right-5right: 1.25rem;.bottom-5bottom: 1.25rem;.left-5left: 1.25rem;.-top-5top: -1.25rem;.-right-5right: -1.25rem;.-bottom-5bottom: -1.25rem;.-left-5left: -1.25rem;.inset-6top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem;.-inset-6top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem;.inset-y-6top: 1.5rem; bottom: 1.5rem;.-inset-y-6top: -1.5rem; bottom: -1.5rem;.inset-x-6right: 1.5rem; left: 1.5rem;.-inset-x-6right: -1.5rem; left: -1.5rem;.top-6top: 1.5rem;.right-6right: 1.5rem;.bottom-6bottom: 1.5rem;.left-6left: 1.5rem;.-top-6top: -1.5rem;.-right-6right: -1.5rem;.-bottom-6bottom: -1.5rem;.-left-6left: -1.5rem;.inset-7top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem;.-inset-7top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem;.inset-y-7top: 1.75rem; bottom: 1.75rem;.-inset-y-7top: -1.75rem; bottom: -1.75rem;.inset-x-7right: 1.75rem; left: 1.75rem;.-inset-x-7right: -1.75rem; left: -1.75rem;.top-7top: 1.75rem;.right-7right: 1.75rem;.bottom-7bottom: 1.75rem;.left-7left: 1.75rem;.-top-7top: -1.75rem;.-right-7right: -1.75rem;.-bottom-7bottom: -1.75rem;.-left-7left: -1.75rem;.inset-8top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;.-inset-8top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;.inset-y-8top: 2rem; bottom: 2rem;.-inset-y-8top: -2rem; bottom: -2rem;.inset-x-8right: 2rem; left: 2rem;.-inset-x-8right: -2rem; left: -2rem;.top-8top: 2rem;.right-8right: 2rem;.bottom-8bottom: 2rem;.left-8left: 2rem;.-top-8top: -2rem;.-right-8right: -2rem;.-bottom-8bottom: -2rem;.-left-8left: -2rem;.inset-9top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem;.-inset-9top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem;.inset-y-9top: 2.25rem; bottom: 2.25rem;.-inset-y-9top: -2.25rem; bottom: -2.25rem;.inset-x-9right: 2.25rem; left: 2.25rem;.-inset-x-9right: -2.25rem; left: -2.25rem;.top-9top: 2.25rem;.right-9right: 2.25rem;.bottom-9bottom: 2.25rem;.left-9left: 2.25rem;.-top-9top: -2.25rem;.-right-9right: -2.25rem;.-bottom-9bottom: -2.25rem;.-left-9left: -2.25rem;.inset-10top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem;.-inset-10top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem;.inset-y-10top: 2.5rem; bottom: 2.5rem;.-inset-y-10top: -2.5rem; bottom: -2.5rem;.inset-x-10right: 2.5rem; left: 2.5rem;.-inset-x-10right: -2.5rem; left: -2.5rem;.top-10top: 2.5rem;.right-10right: 2.5rem;.bottom-10bottom: 2.5rem;.left-10left: 2.5rem;.-top-10top: -2.5rem;.-right-10right: -2.5rem;.-bottom-10bottom: -2.5rem;.-left-10left: -2.5rem;.inset-11top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem;.-inset-11top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem;.inset-y-11top: 2.75rem; bottom: 2.75rem;.-inset-y-11top: -2.75rem; bottom: -2.75rem;.inset-x-11right: 2.75rem; left: 2.75rem;.-inset-x-11right: -2.75rem; left: -2.75rem;.top-11top: 2.75rem;.right-11right: 2.75rem;.bottom-11bottom: 2.75rem;.left-11left: 2.75rem;.-top-11top: -2.75rem;.-right-11right: -2.75rem;.-bottom-11bottom: -2.75rem;.-left-11left: -2.75rem;.inset-12top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;.-inset-12top: -3rem; right: -3rem; bottom: -3rem; left: -3rem;.inset-y-12top: 3rem; bottom: 3rem;.-inset-y-12top: -3rem; bottom: -3rem;.inset-x-12right: 3rem; left: 3rem;.-inset-x-12right: -3rem; left: -3rem;.top-12top: 3rem;.right-12right: 3rem;.bottom-12bottom: 3rem;.left-12left: 3rem;.-top-12top: -3rem;.-right-12right: -3rem;.-bottom-12bottom: -3rem;.-left-12left: -3rem;.inset-14top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem;.-inset-14top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem;.inset-y-14top: 3.5rem; bottom: 3.5rem;.-inset-y-14top: -3.5rem; bottom: -3.5rem;.inset-x-14right: 3.5rem; left: 3.5rem;.-inset-x-14right: -3.5rem; left: -3.5rem;.top-14top: 3.5rem;.right-14right: 3.5rem;.bottom-14bottom: 3.5rem;.left-14left: 3.5rem;.-top-14top: -3.5rem;.-right-14right: -3.5rem;.-bottom-14bottom: -3.5rem;.-left-14left: -3.5rem;.inset-16top: 4rem; right: 4rem; bottom: 4rem; left: 4rem;.-inset-16top: -4rem; right: -4rem; bottom: -4rem; left: -4rem;.inset-y-16top: 4rem; bottom: 4rem;.-inset-y-16top: -4rem; bottom: -4rem;.inset-x-16right: 4rem; left: 4rem;.-inset-x-16right: -4rem; left: -4rem;.top-16top: 4rem;.right-16right: 4rem;.bottom-16bottom: 4rem;.left-16left: 4rem;.-top-16top: -4rem;.-right-16right: -4rem;.-bottom-16bottom: -4rem;.-left-16left: -4rem;.inset-20top: 5rem; right: 5rem; bottom: 5rem; left: 5rem;.-inset-20top: -5rem; right: -5rem; bottom: -5rem; left: -5rem;.inset-y-20top: 5rem; bottom: 5rem;.-inset-y-20top: -5rem; bottom: -5rem;.inset-x-20right: 5rem; left: 5rem;.-inset-x-20right: -5rem; left: -5rem;.top-20top: 5rem;.right-20right: 5rem;.bottom-20bottom: 5rem;.left-20left: 5rem;.-top-20top: -5rem;.-right-20right: -5rem;.-bottom-20bottom: -5rem;.-left-20left: -5rem;.inset-24top: 6rem; right: 6rem; bottom: 6rem; left: 6rem;.-inset-24top: -6rem; right: -6rem; bottom: -6rem; left: -6rem;.inset-y-24top: 6rem; bottom: 6rem;.-inset-y-24top: -6rem; bottom: -6rem;.inset-x-24right: 6rem; left: 6rem;.-inset-x-24right: -6rem; left: -6rem;.top-24top: 6rem;.right-24right: 6rem;.bottom-24bottom: 6rem;.left-24left: 6rem;.-top-24top: -6rem;.-right-24right: -6rem;.-bottom-24bottom: -6rem;.-left-24left: -6rem;.inset-28top: 7rem; right: 7rem; bottom: 7rem; left: 7rem;.-inset-28top: -7rem; right: -7rem; bottom: -7rem; left: -7rem;.inset-y-28top: 7rem; bottom: 7rem;.-inset-y-28top: -7rem; bottom: -7rem;.inset-x-28right: 7rem; left: 7rem;.-inset-x-28right: -7rem; left: -7rem;.top-28top: 7rem;.right-28right: 7rem;.bottom-28bottom: 7rem;.left-28left: 7rem;.-top-28top: -7rem;.-right-28right: -7rem;.-bottom-28bottom: -7rem;.-left-28left: -7rem;.inset-32top: 8rem; right: 8rem; bottom: 8rem; left: 8rem;.-inset-32top: -8rem; right: -8rem; bottom: -8rem; left: -8rem;.inset-y-32top: 8rem; bottom: 8rem;.-inset-y-32top: -8rem; bottom: -8rem;.inset-x-32right: 8rem; left: 8rem;.-inset-x-32right: -8rem; left: -8rem;.top-32top: 8rem;.right-32right: 8rem;.bottom-32bottom: 8rem;.left-32left: 8rem;.-top-32top: -8rem;.-right-32right: -8rem;.-bottom-32bottom: -8rem;.-left-32left: -8rem;.inset-36top: 9rem; right: 9rem; bottom: 9rem; left: 9rem;.-inset-36top: -9rem; right: -9rem; bottom: -9rem; left: -9rem;.inset-y-36top: 9rem; bottom: 9rem;.-inset-y-36top: -9rem; bottom: -9rem;.inset-x-36right: 9rem; left: 9rem;.-inset-x-36right: -9rem; left: -9rem;.top-36top: 9rem;.right-36right: 9rem;.bottom-36bottom: 9rem;.left-36left: 9rem;.-top-36top: -9rem;.-right-36right: -9rem;.-bottom-36bottom: -9rem;.-left-36left: -9rem;.inset-40top: 10rem; right: 10rem; bottom: 10rem; left: 10rem;.-inset-40top: -10rem; right: -10rem; bottom: -10rem; left: -10rem;.inset-y-40top: 10rem; bottom: 10rem;.-inset-y-40top: -10rem; bottom: -10rem;.inset-x-40right: 10rem; left: 10rem;.-inset-x-40right: -10rem; left: -10rem;.top-40top: 10rem;.right-40right: 10rem;.bottom-40bottom: 10rem;.left-40left: 10rem;.-top-40top: -10rem;.-right-40right: -10rem;.-bottom-40bottom: -10rem;.-left-40left: -10rem;.inset-44top: 11rem; right: 11rem; bottom: 11rem; left: 11rem;.-inset-44top: -11rem; right: -11rem; bottom: -11rem; left: -11rem;.inset-y-44top: 11rem; bottom: 11rem;.-inset-y-44top: -11rem; bottom: -11rem;.inset-x-44right: 11rem; left: 11rem;.-inset-x-44right: -11rem; left: -11rem;.top-44top: 11rem;.right-44right: 11rem;.bottom-44bottom: 11rem;.left-44left: 11rem;.-top-44top: -11rem;.-right-44right: -11rem;.-bottom-44bottom: -11rem;.-left-44left: -11rem;.inset-48top: 12rem; right: 12rem; bottom: 12rem; left: 12rem;.-inset-48top: -12rem; right: -12rem; bottom: -12rem; left: -12rem;.inset-y-48top: 12rem; bottom: 12rem;.-inset-y-48top: -12rem; bottom: -12rem;.inset-x-48right: 12rem; left: 12rem;.-inset-x-48right: -12rem; left: -12rem;.top-48top: 12rem;.right-48right: 12rem;.bottom-48bottom: 12rem;.left-48left: 12rem;.-top-48top: -12rem;.-right-48right: -12rem;.-bottom-48bottom: -12rem;.-left-48left: -12rem;.inset-52top: 13rem; right: 13rem; bottom: 13rem; left: 13rem;.-inset-52top: -13rem; right: -13rem; bottom: -13rem; left: -13rem;.inset-y-52top: 13rem; bottom: 13rem;.-inset-y-52top: -13rem; bottom: -13rem;.inset-x-52right: 13rem; left: 13rem;.-inset-x-52right: -13rem; left: -13rem;.top-52top: 13rem;.right-52right: 13rem;.bottom-52bottom: 13rem;.left-52left: 13rem;.-top-52top: -13rem;.-right-52right: -13rem;.-bottom-52bottom: -13rem;.-left-52left: -13rem;.inset-56top: 14rem; right: 14rem; bottom: 14rem; left: 14rem;.-inset-56top: -14rem; right: -14rem; bottom: -14rem; left: -14rem;.inset-y-56top: 14rem; bottom: 14rem;.-inset-y-56top: -14rem; bottom: -14rem;.inset-x-56right: 14rem; left: 14rem;.-inset-x-56right: -14rem; left: -14rem;.top-56top: 14rem;.right-56right: 14rem;.bottom-56bottom: 14rem;.left-56left: 14rem;.-top-56top: -14rem;.-right-56right: -14rem;.-bottom-56bottom: -14rem;.-left-56left: -14rem;.inset-60top: 15rem; right: 15rem; bottom: 15rem; left: 15rem;.-inset-60top: -15rem; right: -15rem; bottom: -15rem; left: -15rem;.inset-y-60top: 15rem; bottom: 15rem;.-inset-y-60top: -15rem; bottom: -15rem;.inset-x-60right: 15rem; left: 15rem;.-inset-x-60right: -15rem; left: -15rem;.top-60top: 15rem;.right-60right: 15rem;.bottom-60bottom: 15rem;.left-60left: 15rem;.-top-60top: -15rem;.-right-60right: -15rem;.-bottom-60bottom: -15rem;.-left-60left: -15rem;.inset-64top: 16rem; right: 16rem; bottom: 16rem; left: 16rem;.-inset-64top: -16rem; right: -16rem; bottom: -16rem; left: -16rem;.inset-y-64top: 16rem; bottom: 16rem;.-inset-y-64top: -16rem; bottom: -16rem;.inset-x-64right: 16rem; left: 16rem;.-inset-x-64right: -16rem; left: -16rem;.top-64top: 16rem;.right-64right: 16rem;.bottom-64bottom: 16rem;.left-64left: 16rem;.-top-64top: -16rem;.-right-64right: -16rem;.-bottom-64bottom: -16rem;.-left-64left: -16rem;.inset-72top: 18rem; right: 18rem; bottom: 18rem; left: 18rem;.-inset-72top: -18rem; right: -18rem; bottom: -18rem; left: -18rem;.inset-y-72top: 18rem; bottom: 18rem;.-inset-y-72top: -18rem; bottom: -18rem;.inset-x-72right: 18rem; left: 18rem;.-inset-x-72right: -18rem; left: -18rem;.top-72top: 18rem;.right-72right: 18rem;.bottom-72bottom: 18rem;.left-72left: 18rem;.-top-72top: -18rem;.-right-72right: -18rem;.-bottom-72bottom: -18rem;.-left-72left: -18rem;.inset-80top: 20; right: 20; bottom: 20; left: 20;.-inset-80top: -20; right: -20; bottom: -20; left: -20;.inset-y-80top: 20; bottom: 20;.-inset-y-80top: -20; bottom: -20;.inset-x-80right: 20; left: 20;.-inset-x-80right: -20; left: -20;.top-80top: 20;.right-80right: 20;.bottom-80bottom: 20;.left-80left: 20;.-top-80top: -20;.-right-80right: -20;.-bottom-80bottom: -20;.-left-80left: -20rem;.inset-96top: 24rem; right: 24rem; bottom: 24rem; left: 24rem;.-inset-96top: -24rem; right: -24rem; bottom: -24rem; left: -24rem;.inset-y-96top: 24rem; bottom: 24rem;.-inset-y-96top: -24rem; bottom: -24rem;.inset-x-96right: 24rem; left: 24rem;.-inset-x-96right: -24rem; left: -24rem;.top-96top: 24rem;.right-96right: 24rem;.bottom-96bottom: 24rem;.left-96left: 24rem;.-top-96top: -24rem;.-right-96right: -24rem;.-bottom-96bottom: -24rem;.-left-96left: -24rem;.inset-autotop: auto; right: auto; bottom: auto; left: auto;.inset-y-autotop: auto; bottom: auto;.inset-x-autoright: auto; left: auto;.top-autotop: auto;.right-autoright: auto;.bottom-autobottom: auto;.left-autoleft: auto;.inset-1/2top: 50%; right: 50%; bottom: 50%; left: 50%;.inset-2/3top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%;.inset-1/4top: 25%; right: 25%; bottom: 25%; left: 25%;.inset-3/4top: 75%; right: 75%; bottom: 75%; left: 75%;.inset-fulltop: 100%; right: 100%; bottom: 100%; left: 100%;.-inset-1/2top: -50%; right: -50%; bottom: -50%; left: -50%;.-inset-2/3top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%;.-inset-1/4top: -25%; right: -25%; bottom: -25%; left: -25%;.-inset-3/4top: -75%; right: -75%; bottom: -75%; left: -75%;.-inset-fulltop: -100%; right: -100%; bottom: -100%; left: -100%;.inset-x-1/2right: 50%; left: 50%;.inset-x-2/3right: 66.666667%; left: 66.666667%;.inset-x-1/4right: 25%; left: 25%;.inset-x-3/4right: 75%; left: 75%;.inset-x-fullright: 100%; left: 100%;.-inset-x-1/2right: -50%; left: -50%;.-inset-x-2/3right: -66.666667%; left: -66.666667%;.-inset-x-1/4right: -25%; left: -25%;.-inset-x-3/4right: -75%; left: -75%;.-inset-x-fullright: -100%; left: -100%;.inset-y-1/2top: 50%; bottom: 50%;.inset-y-2/3top: 66.666667%; bottom: 66.666667%;.inset-y-1/4top: 25%; bottom: 25%;.inset-y-3/4top: 75%; bottom: 75%;.inset-y-fulltop: 100%; bottom: 100%;.-inset-y-1/2top: -50%; bottom: -50%;.-inset-y-2/3top: -66.666667%; bottom: -66.666667%;.-inset-y-1/4top: -25%; bottom: -25%;.-inset-y-3/4top: -75%; bottom: -75%;.-inset-y-fulltop: -100%; bottom: -100%;.top-1/2top: 50%;.top-2/3top: 66.666667%;.top-1/4top: 25%;.top-3/4top: 75%;.top-fulltop: 100%;.-top-1/2top: -50%;.-top-2/3top: -66.666667%;.-top-1/4top: -25%;.-top-3/4top: -75%;.-top-fulltop: -100%;.right-1/2right: 50%;.right-2/3right: 66.666667%;.right-1/4right: 25%;.right-3/4right: 75%;.right-fullright: 100%;.-right-1/2right: -50%;.-right-2/3right: -66.666667%;.-right-1/4right: -25%;.-right-3/4right: -75%;.-right-fullright: -100%;.bottom-1/2bottom: 50%;.bottom-2/3bottom: 66.666667%;.bottom-1/4bottom: 25%;.bottom-3/4bottom: 75%;.bottom-fullbottom: 100%;.-bottom-1/2bottom: -50%;.-bottom-2/3bottom: -66.666667%;.-bottom-1/4bottom: -25%;.-bottom-3/4bottom: -75%;.-bottom-fullbottom: -100%;.left-1/2left: 50%;.left-2/3left: 66.666667%;.left-1/4left: 25%;.left-3/4left: 75%;.left-fullleft: 100%;.-left-1/2left: -50%;.-left-2/3left: -66.666667%;.-left-1/4left: -25%;.-left-3/4left: -75%;.-left-fullleft: -100%;

Show or hide an element without changing the layout of a document.

.visiblevisibility: visible;.invisiblevisibility: hidden;

Set the z-order of a positioned element and its descendants or flex items.

.z-0z-index: 0;.z-10z-index: 10;.z-20z-index: 20;.z-30z-index: 30;.z-40z-index: 40;.z-50z-index: 50;.z-autoz-index: auto;

Set the padding area of an element on all sides, vertically, horizontally, or just on one side.

.p-0padding: 0;.p-0.5padding: 0.125rem;2px.p-1padding: 0.25rem;4px.p-1.5padding: 0.375rem;6px.p-2padding: 0.5rem;8px.p-2.5padding: 0.625rem;10px.p-3padding: 0.75rem;12px.p-3.5padding: 0.875rem;14px.p-4padding: 1rem;16px.p-5padding: 1.25rem;20px.p-6padding: 1.5rem;24px.p-8padding: 2rem;32px.p-10padding: 2.5rem;40px.p-11padding: 2.75rem;44px.p-12padding: 3rem;48px.p-14padding: 3.5rem;56px.p-16padding: 4rem;64px.p-20padding: 5rem;80px.p-24padding: 6rem;96px.p-28padding: 7rem;112px.p-32padding: 8rem;128px.p-36padding: 9rem;144px.p-40padding: 10rem;160px.p-44padding: 11rem;176px.p-48padding: 12rem;192px.p-52padding: 13rem;208px.p-56padding: 14rem;224px.p-64padding: 16rem;256px.p-72padding: 18rem;288px.p-80padding: 20rem;320px.p-96padding: 24rem;384px.p-pxpadding: 1px;.py-0padding-top: 0; padding-bottom: 0;.px-0padding-left: 0; padding-right: 0;.py-0.5padding-top: 0.125rem; padding-bottom: 0.125rem;2px.px-0.5padding-left: 0.125rem; padding-right: 0.125rem;2px.py-1padding-top: 0.25rem; padding-bottom: 0.25rem;4px.px-1padding-left: 0.25rem; padding-right: 0.25rem;4px.py-1.5padding-top: 0.375rem; padding-bottom: 0.375rem;6px.px-1.5padding-left: 0.375rem; padding-right: 0.375rem;6px.py-2padding-top: 0.5rem; padding-bottom: 0.5rem;8px.px-2padding-left: 0.5rem; padding-right: 0.5rem;8px.py-2.5padding-top: 0.625rem; padding-bottom: 0.625rem;10px.px-2.5padding-left: 0.625rem; padding-right: 0.625rem;10px.py-3padding-top: 0.75rem; padding-bottom: 0.75rem;12px.px-3padding-left: 0.75rem; padding-right: 0.75rem;12px.py-3.5padding-top: 0.875rem; padding-bottom: 0.875rem;14px.px-3.5padding-left: 0.875rem; padding-right: 0.875rem;14px.py-4padding-top: 1rem; padding-bottom: 1rem;16px.px-4padding-left: 1rem; padding-right: 1rem;16px.py-5padding-top: 1.25rem; padding-bottom: 1.25rem;20px.px-5padding-left: 1.25rem; padding-right: 1.25rem;20px.py-6padding-top: 1.5rem; padding-bottom: 1.5rem;24px.px-6padding-left: 1.5rem; padding-right: 1.5rem;24px.py-7padding-top: 1.75rem; padding-bottom: 1.75rem;24px.px-7padding-left: 1.75rem; padding-right: 1.75rem;24px.py-8padding-top: 2rem; padding-bottom: 2rem;32px.px-8padding-left: 2rem; padding-right: 2rem;32px.py-9padding-top: 2.25rem; padding-bottom: 2.25rem;36px.px-9padding-left: 2.25rem; padding-right: 2.25rem;36px.py-10padding-top: 2.5rem; padding-bottom: 2.5rem;40px.px-10padding-left: 2.5rem; padding-right: 2.5rem;40px.py-11padding-top: 2.75rem; padding-bottom: 2.75rem;44px.px-11padding-left: 2.75rem; padding-right: 2.75rem;44px.py-12padding-top: 3rem; padding-bottom: 3rem;48px.px-12padding-left: 3rem; padding-right: 3rem;48px.py-14padding-top: 3.5rem; padding-bottom: 3.5rem;56px.px-14padding-left: 3.5rem; padding-right: 3.5rem;56px.py-16padding-top: 4rem; padding-bottom: 4rem;64px.px-16padding-left: 4rem; padding-right: 4rem;64px.py-20padding-top: 5rem; padding-bottom: 5rem;80px.px-20padding-left: 5rem; padding-right: 5rem;80px.py-24padding-top: 6rem; padding-bottom: 6rem;96px.px-24padding-left: 6rem; padding-right: 6rem;96px.py-28padding-top: 7rem; padding-bottom: 7rem;112px.px-28padding-left: 7rem; padding-right: 7rem;112px.py-32padding-top: 8rem; padding-bottom: 8rem;128px.px-32padding-left: 8rem; padding-right: 8rem;128px.py-36padding-top: 9rem; padding-bottom: 9rem;144px.px-36padding-left: 9rem; padding-right: 9rem;144px.py-40padding-top: 10rem; padding-bottom: 10rem;160px.px-40padding-left: 10rem; padding-right: 10rem;160px.py-44padding-top: 11rem; padding-bottom: 11rem;176px.px-44padding-left: 11rem; padding-right: 11rem;176px.py-48padding-top: 12rem; padding-bottom: 12rem;192px.px-48padding-left: 12rem; padding-right: 12rem;192px.py-52padding-top: 13rem; padding-bottom: 13rem;208px.px-52padding-left: 13rem; padding-right: 13rem;208px.py-56padding-top: 14rem; padding-bottom: 14rem;224px.px-56padding-left: 14rem; padding-right: 14rem;224px.py-60padding-top: 15rem; padding-bottom: 15rem;240px.px-60padding-left: 15rem; padding-right: 15rem;240px.py-64padding-top: 16rem; padding-bottom: 16rem;256px.px-64padding-left: 16rem; padding-right: 16rem;256px.py-70padding-top: 18rem; padding-bottom: 18rem;280px.px-70padding-left: 18rem; padding-right: 18rem;280px.py-80padding-top: 20rem; padding-bottom: 20rem;320px.px-80padding-left: 20rem; padding-right: 20rem;320px.py-96padding-top: 24rem; padding-bottom: 24rem;384px.px-96padding-left: 24rem; padding-right: 24rem;384px.py-pxpadding-top: 1px; padding-bottom: 1px;.px-pxpadding-left: 1px; padding-right: 1px;.pt-0padding-top: 0;.pr-0padding-right: 0;.pb-0padding-bottom: 0;.pl-0padding-left: 0;.pt-0.5padding-top: 0.125rem;2px.pr-0.5padding-right: 0.125rem;2px.pb-0.5padding-bottom: 0.125rem;2px.pl-0.5padding-left: 0.125rem;2px.pt-1padding-top: 0.25rem;4px.pr-1padding-right: 0.25rem;4px.pb-1padding-bottom: 0.25rem;4px.pl-1padding-left: 0.25rem;4px.pt-1.5padding-top: 0.375rem;6px.pr-1.5padding-right: 0.375rem;6px.pb-1.5padding-bottom: 0.375rem;6px.pl-1.5padding-left: 0.375rem;6px.pt-2padding-top: 0.5rem;8px.pr-2padding-right: 0.5rem;8px.pb-2padding-bottom: 0.5rem;8px.pl-2padding-left: 0.5rem;8px.pt-2.5padding-top: 0.625rem;10px.pr-2.5padding-right: 0.625rem;10px.pb-2.5padding-bottom: 0.625rem;10px.pl-2.5padding-left: 0.625rem;10px.pt-3padding-top: 0.75rem;12px.pr-3padding-right: 0.75rem;12px.pb-3padding-bottom: 0.75rem;12px.pl-3padding-left: 0.75rem;12px.pt-3.5padding-top: 0.875rem;14px.pr-3.5padding-right: 0.875rem;14px.pb-3.5padding-bottom: 0.875rem;14px.pl-3.5padding-left: 0.875rem;14px.pt-4padding-top: 1rem;16px.pr-4padding-right: 1rem;16px.pb-4padding-bottom: 1rem;16px.pl-4padding-left: 1rem;16px.pt-5padding-top: 1.25rem;20px.pr-5padding-right: 1.25rem;20px.pb-5padding-bottom: 1.25rem;20px.pl-5padding-left: 1.25rem;20px.pt-6padding-top: 1.5rem;24px.pr-6padding-right: 1.5rem;24px.pb-6padding-bottom: 1.5rem;24px.pl-6padding-left: 1.5rem;24px.pt-7padding-top: 1.75rem;28px.pr-7padding-right: 1.75rem;28px.pb-7padding-bottom: 1.75rem;28px.pl-7padding-left: 1.75rem;28px.pt-8padding-top: 2rem;32px.pr-8padding-right: 2rem;32px.pb-8padding-bottom: 2rem;32px.pl-8padding-left: 2rem;32px.pt-9padding-top: 2.25rem;36px.pr-9padding-right: 2.25rem;36px.pb-9padding-bottom: 2.25rem;36px.pl-9padding-left: 2.25rem;36px.pt-10padding-top: 2.5rem;40px.pr-10padding-right: 2.5rem;40px.pb-10padding-bottom: 2.5rem;40px.pl-10padding-left: 2.5rem;40px.pt-11padding-top: 2.75rem;44px.pr-11padding-right: 2.75rem;44px.pb-11padding-bottom: 2.75rem;44px.pl-11padding-left: 2.75rem;44px.pt-12padding-top: 3rem;48px.pr-12padding-right: 3rem;48px.pb-12padding-bottom: 3rem;48px.pl-12padding-left: 3rem;48px.pt-14padding-top: 3.5rem;56px.pr-14padding-right: 3.5rem;56px.pb-14padding-bottom: 3.5rem;56px.pl-14padding-left: 3.5rem;56px.pt-16padding-top: 4rem;64px.pr-16padding-right: 4rem;64px.pb-16padding-bottom: 4rem;64px.pl-16padding-left: 4rem;64px.pt-20padding-top: 5rem;80px.pr-20padding-right: 5rem;80px.pb-20padding-bottom: 5rem;80px.pl-20padding-left: 5rem;80px.pt-24padding-top: 6rem;96px.pr-24padding-right: 6rem;96px.pb-24padding-bottom: 6rem;96px.pl-24padding-left: 6rem;96px.pt-28padding-top: 7rem;112px.pr-28padding-right: 7rem;112px.pb-28padding-bottom: 7rem;112px.pl-28padding-left: 7rem;112px.pt-32padding-top: 8rem;128px.pr-32padding-right: 8rem;128px.pb-32padding-bottom: 8rem;128px.pl-32padding-left: 8rem;128px.pt-36padding-top: 9rem;144px.pr-36padding-right: 9rem;144px.pb-36padding-bottom: 9rem;144px.pl-36padding-left: 9rem;144px.pt-40padding-top: 10rem;160px.pr-40padding-right: 10rem;160px.pb-40padding-bottom: 10rem;160px.pl-40padding-left: 10rem;160px.pt-44padding-top: 11rem;176px.pr-44padding-right: 11rem;176px.pb-44padding-bottom: 11rem;176px.pl-44padding-left: 11rem;176px.pt-48padding-top: 12rem;192px.pr-48padding-right: 12rem;192px.pb-48padding-bottom: 12rem;192px.pl-48padding-left: 12rem;192px.pt-52padding-top: 13rem;208px.pr-52padding-right: 13rem;208px.pb-52padding-bottom: 13rem;208px.pl-52padding-left: 13rem;208px.pt-56padding-top: 14rem;224px.pr-56padding-right: 14rem;224px.pb-56padding-bottom: 14rem;224px.pl-56padding-left: 14rem;224px.pt-60padding-top: 15rem;240px.pr-60padding-right: 15rem;240px.pb-60padding-bottom: 15rem;240px.pl-60padding-left: 15rem;240px.pt-64padding-top: 16rem;256px.pr-64padding-right: 16rem;256px.pb-64padding-bottom: 16rem;256px.pl-64padding-left: 16rem;256px.pt-72padding-top: 18rem;288px.pr-72padding-right: 18rem;288px.pb-72padding-bottom: 18rem;288px.pl-72padding-left: 18rem;288px.pt-80padding-top: 20rem;320px.pr-80padding-right: 20rem;320px.pb-80padding-bottom: 20rem;320px.pl-80padding-left: 20rem;320px.pt-96padding-top: 24rem;384px.pr-96padding-right: 24rem;384px.pb-96padding-bottom: 24rem;384px.pl-96padding-left: 24rem;384px.pt-pxpadding-top: 1px;.pr-pxpadding-right: 1px;.pb-pxpadding-bottom: 1px;.pl-pxpadding-left: 1px;

Set the margin area of an element on all sides, vertically, horizontally, or just on one side.

.m-0margin: 0;.m-0.5margin: 0.125rem;2px.m-1margin: 0.25rem;4px.m-1.5margin: 0.375rem;6px.m-2margin: 0.5rem;8px.m-2.5margin: 0.625rem;10px.m-3margin: 0.75rem;12px.m-3.5margin: 0.875rem;14px.m-4margin: 1rem;16px.m-5margin: 1.25rem;20px.m-6margin: 1.5rem;24px.m-8margin: 2rem;32px.m-10margin: 2.5rem;40px.m-11margin: 2.75rem;44px.m-12margin: 3rem;48px.m-14margin: 3.5rem;56px.m-16margin: 4rem;64px.m-20margin: 5rem;80px.m-24margin: 6rem;96px.m-28margin: 7rem;112px.m-32margin: 8rem;128px.m-36margin: 9rem;144px.m-40margin: 10rem;160px.m-44margin: 11rem;176px.m-48margin: 12rem;192px.m-52margin: 13rem;208px.m-56margin: 14rem;224px.m-64margin: 16rem;256px.m-72margin: 18rem;288px.m-80margin: 20rem;320px.m-96margin: 24rem;384px.m-pxmargin: 1px;.my-0margin-top: 0; margin-bottom: 0;.mx-0margin-left: 0; margin-right: 0;.my-0.5margin-top: 0.125rem; margin-bottom: 0.125rem;2px.mx-0.5margin-left: 0.125rem; margin-right: 0.125rem;2px.my-1margin-top: 0.25rem; margin-bottom: 0.25rem;4px.mx-1margin-left: 0.25rem; margin-right: 0.25rem;4px.my-1.5margin-top: 0.375rem; margin-bottom: 0.375rem;6px.mx-1.5margin-left: 0.375rem; margin-right: 0.375rem;6px.my-2margin-top: 0.5rem; margin-bottom: 0.5rem;8px.mx-2margin-left: 0.5rem; margin-right: 0.5rem;8px.my-2.5margin-top: 0.625rem; margin-bottom: 0.625rem;10px.mx-2.5margin-left: 0.625rem; margin-right: 0.625rem;10px.my-3margin-top: 0.75rem; margin-bottom: 0.75rem;12px.mx-3margin-left: 0.75rem; margin-right: 0.75rem;12px.my-3.5margin-top: 0.875rem; margin-bottom: 0.875rem;14px.mx-3.5margin-left: 0.875rem; margin-right: 0.875rem;14px.my-4margin-top: 1rem; margin-bottom: 1rem;16px.mx-4margin-left: 1rem; margin-right: 1rem;16px.my-5margin-top: 1.25rem; margin-bottom: 1.25rem;20px.mx-5margin-left: 1.25rem; margin-right: 1.25rem;20px.my-6margin-top: 1.5rem; margin-bottom: 1.5rem;24px.mx-6margin-left: 1.5rem; margin-right: 1.5rem;24px.my-7margin-top: 1.75rem; margin-bottom: 1.75rem;24px.mx-7margin-left: 1.75rem; margin-right: 1.75rem;24px.my-8margin-top: 2rem; margin-bottom: 2rem;32px.mx-8margin-left: 2rem; margin-right: 2rem;32px.my-9margin-top: 2.25rem; margin-bottom: 2.25rem;36px.mx-9margin-left: 2.25rem; margin-right: 2.25rem;36px.my-10margin-top: 2.5rem; margin-bottom: 2.5rem;40px.mx-10margin-left: 2.5rem; margin-right: 2.5rem;40px.my-11margin-top: 2.75rem; margin-bottom: 2.75rem;44px.mx-11margin-left: 2.75rem; margin-right: 2.75rem;44px.my-12margin-top: 3rem; margin-bottom: 3rem;48px.mx-12margin-left: 3rem; margin-right: 3rem;48px.my-14margin-top: 3.5rem; margin-bottom: 3.5rem;56px.mx-14margin-left: 3.5rem; margin-right: 3.5rem;56px.my-16margin-top: 4rem; margin-bottom: 4rem;64px.mx-16margin-left: 4rem; margin-right: 4rem;64px.my-20margin-top: 5rem; margin-bottom: 5rem;80px.mx-20margin-left: 5rem; margin-right: 5rem;80px.my-24margin-top: 6rem; margin-bottom: 6rem;96px.mx-24margin-left: 6rem; margin-right: 6rem;96px.my-28margin-top: 7rem; margin-bottom: 7rem;112px.mx-28margin-left: 7rem; margin-right: 7rem;112px.my-32margin-top: 8rem; margin-bottom: 8rem;128px.mx-32margin-left: 8rem; margin-right: 8rem;128px.my-36margin-top: 9rem; margin-bottom: 9rem;144px.mx-36margin-left: 9rem; margin-right: 9rem;144px.my-40margin-top: 10rem; margin-bottom: 10rem;160px.mx-40margin-left: 10rem; margin-right: 10rem;160px.my-44margin-top: 11rem; margin-bottom: 11rem;176px.mx-44margin-left: 11rem; margin-right: 11rem;176px.my-48margin-top: 12rem; margin-bottom: 12rem;192px.mx-48margin-left: 12rem; margin-right: 12rem;192px.my-52margin-top: 13rem; margin-bottom: 13rem;208px.mx-52margin-left: 13rem; margin-right: 13rem;208px.my-56margin-top: 14rem; margin-bottom: 14rem;224px.mx-56margin-left: 14rem; margin-right: 14rem;224px.my-60margin-top: 15rem; margin-bottom: 15rem;240px.mx-60margin-left: 15rem; margin-right: 15rem;240px.my-64margin-top: 16rem; margin-bottom: 16rem;256px.mx-64margin-left: 16rem; margin-right: 16rem;256px.my-70margin-top: 18rem; margin-bottom: 18rem;280px.mx-70margin-left: 18rem; margin-right: 18rem;280px.my-80margin-top: 20rem; margin-bottom: 20rem;320px.mx-80margin-left: 20rem; margin-right: 20rem;320px.my-96margin-top: 24rem; margin-bottom: 24rem;384px.mx-96margin-left: 24rem; margin-right: 24rem;384px.my-pxmargin-top: 1px; margin-bottom: 1px;.mx-pxmargin-left: 1px; margin-right: 1px;.mt-0margin-top: 0;.mr-0margin-right: 0;.mb-0margin-bottom: 0;.ml-0margin-left: 0;.mt-0.5margin-top: 0.125rem;2px.mr-0.5margin-right: 0.125rem;2px.mb-0.5margin-bottom: 0.125rem;2px.ml-0.5margin-left: 0.125rem;2px.mt-1margin-top: 0.25rem;4px.mr-1margin-right: 0.25rem;4px.mb-1margin-bottom: 0.25rem;4px.ml-1margin-left: 0.25rem;4px.mt-1.5margin-top: 0.375rem;6px.mr-1.5margin-right: 0.375rem;6px.mb-1.5margin-bottom: 0.375rem;6px.ml-1.5margin-left: 0.375rem;6px.mt-2margin-top: 0.5rem;8px.mr-2margin-right: 0.5rem;8px.mb-2margin-bottom: 0.5rem;8px.ml-2margin-left: 0.5rem;8px.mt-2.5margin-top: 0.625rem;10px.mr-2.5margin-right: 0.625rem;10px.mb-2.5margin-bottom: 0.625rem;10px.ml-2.5margin-left: 0.625rem;10px.mt-3margin-top: 0.75rem;12px.mr-3margin-right: 0.75rem;12px.mb-3margin-bottom: 0.75rem;12px.ml-3margin-left: 0.75rem;12px.mt-3.5margin-top: 0.875rem;14px.mr-3.5margin-right: 0.875rem;14px.mb-3.5margin-bottom: 0.875rem;14px.ml-3.5margin-left: 0.875rem;14px.mt-4margin-top: 1rem;16px.mr-4margin-right: 1rem;16px.mb-4margin-bottom: 1rem;16px.ml-4margin-left: 1rem;16px.mt-5margin-top: 1.25rem;20px.mr-5margin-right: 1.25rem;20px.mb-5margin-bottom: 1.25rem;20px.ml-5margin-left: 1.25rem;20px.mt-6margin-top: 1.5rem;24px.mr-6margin-right: 1.5rem;24px.mb-6margin-bottom: 1.5rem;24px.ml-6margin-left: 1.5rem;24px.mt-7margin-top: 1.75rem;28px.mr-7margin-right: 1.75rem;28px.mb-7margin-bottom: 1.75rem;28px.ml-7margin-left: 1.75rem;28px.mt-8margin-top: 2rem;32px.mr-8margin-right: 2rem;32px.mb-8margin-bottom: 2rem;32px.ml-8margin-left: 2rem;32px.mt-9margin-top: 2.25rem;36px.mr-9margin-right: 2.25rem;36px.mb-9margin-bottom: 2.25rem;36px.ml-9margin-left: 2.25rem;36px.mt-10margin-top: 2.5rem;40px.mr-10margin-right: 2.5rem;40px.mb-10margin-bottom: 2.5rem;40px.ml-10margin-left: 2.5rem;40px.mt-11margin-top: 2.75rem;44px.mr-11margin-right: 2.75rem;44px.mb-11margin-bottom: 2.75rem;44px.ml-11margin-left: 2.75rem;44px.mt-12margin-top: 3rem;48px.mr-12margin-right: 3rem;48px.mb-12margin-bottom: 3rem;48px.ml-12margin-left: 3rem;48px.mt-14margin-top: 3.5rem;56px.mr-14margin-right: 3.5rem;56px.mb-14margin-bottom: 3.5rem;56px.ml-14margin-left: 3.5rem;56px.mt-16margin-top: 4rem;64px.mr-16margin-right: 4rem;64px.mb-16margin-bottom: 4rem;64px.ml-16margin-left: 4rem;64px.mt-20margin-top: 5rem;80px.mr-20margin-right: 5rem;80px.mb-20margin-bottom: 5rem;80px.ml-20margin-left: 5rem;80px.mt-24margin-top: 6rem;96px.mr-24margin-right: 6rem;96px.mb-24margin-bottom: 6rem;96px.ml-24margin-left: 6rem;96px.mt-28margin-top: 7rem;112px.mr-28margin-right: 7rem;112px.mb-28margin-bottom: 7rem;112px.ml-28margin-left: 7rem;112px.mt-32margin-top: 8rem;128px.mr-32margin-right: 8rem;128px.mb-32margin-bottom: 8rem;128px.ml-32margin-left: 8rem;128px.mt-36margin-top: 9rem;144px.mr-36margin-right: 9rem;144px.mb-36margin-bottom: 9rem;144px.ml-36margin-left: 9rem;144px.mt-40margin-top: 10rem;160px.mr-40margin-right: 10rem;160px.mb-40margin-bottom: 10rem;160px.ml-40margin-left: 10rem;160px.mt-44margin-top: 11rem;176px.mr-44margin-right: 11rem;176px.mb-44margin-bottom: 11rem;176px.ml-44margin-left: 11rem;176px.mt-48margin-top: 12rem;192px.mr-48margin-right: 12rem;192px.mb-48margin-bottom: 12rem;192px.ml-48margin-left: 12rem;192px.mt-52margin-top: 13rem;208px.mr-52margin-right: 13rem;208px.mb-52margin-bottom: 13rem;208px.ml-52margin-left: 13rem;208px.mt-56margin-top: 14rem;224px.mr-56margin-right: 14rem;224px.mb-56margin-bottom: 14rem;224px.ml-56margin-left: 14rem;224px.mt-60margin-top: 15rem;240px.mr-60margin-right: 15rem;240px.mb-60margin-bottom: 15rem;240px.ml-60margin-left: 15rem;240px.mt-64margin-top: 16rem;256px.mr-64margin-right: 16rem;256px.mb-64margin-bottom: 16rem;256px.ml-64margin-left: 16rem;256px.mt-72margin-top: 18rem;288px.mr-72margin-right: 18rem;288px.mb-72margin-bottom: 18rem;288px.ml-72margin-left: 18rem;288px.mt-80margin-top: 20rem;320px.mr-80margin-right: 20rem;320px.mb-80margin-bottom: 20rem;320px.ml-80margin-left: 20rem;320px.mt-96margin-top: 24rem;384px.mr-96margin-right: 24rem;384px.mb-96margin-bottom: 24rem;384px.ml-96margin-left: 24rem;384px.mt-pxmargin-top: 1px;.mr-pxmargin-right: 1px;.mb-pxmargin-bottom: 1px;.ml-pxmargin-left: 1px;.-m-0margin: 0;.-m-0.5margin: -0.125rem;2px.-m-1margin: -0.25rem;4px.-m-1.5margin: -0.375rem;6px.-m-2margin: -0.5rem;8px.-m-2.5margin: -0.625rem;10px.-m-3margin: -0.75rem;12px.-m-3.5margin: -0.875rem;14px.-m-4margin: -1rem;16px.-m-5margin: -1.25rem;20px.-m-6margin: -1.5rem;24px.-m-8margin: -2rem;32px.-m-10margin: -2.5rem;40px.-m-11margin: -2.75rem;44px.-m-12margin: -3rem;48px.-m-14margin: -3.5rem;56px.-m-16margin: -4rem;64px.-m-20margin: -5rem;80px.-m-24margin: -6rem;96px.-m-28margin: -7rem;112px.-m-32margin: -8rem;128px.-m-36margin: -9rem;144px.-m-40margin: -10rem;160px.-m-44margin: -11rem;176px.-m-48margin: -12rem;192px.-m-52margin: -13rem;208px.-m-56margin: -14rem;224px.-m-64margin: -16rem;256px.-m-72margin: -18rem;288px.-m-80margin: -20rem;320px.-m-96margin: -24rem;384px.-m-pxmargin: -1px;.-my-0margin-top: 0; margin-bottom: 0;.-mx-0margin-left: 0; margin-right: 0;.-my-0.5margin-top: -0.125rem; margin-bottom: -0.125rem;2px.-mx-0.5margin-left: -0.125rem; margin-right: -0.125rem;2px.-my-1margin-top: -0.25rem; margin-bottom: -0.25rem;4px.-mx-1margin-left: -0.25rem; margin-right: -0.25rem;4px.-my-1.5margin-top: -0.375rem; margin-bottom: -0.375rem;6px.-mx-1.5margin-left: -0.375rem; margin-right: -0.375rem;6px.-my-2margin-top: -0.5rem; margin-bottom: -0.5rem;8px.-mx-2margin-left: -0.5rem; margin-right: -0.5rem;8px.-my-2.5margin-top: -0.625rem; margin-bottom: -0.625rem;10px.-mx-2.5margin-left: -0.625rem; margin-right: -0.625rem;10px.-my-3margin-top: -0.75rem; margin-bottom: -0.75rem;12px.-mx-3margin-left: -0.75rem; margin-right: -0.75rem;12px.-my-3.5margin-top: -0.875rem; margin-bottom: -0.875rem;14px.-mx-3.5margin-left: -0.875rem; margin-right: -0.875rem;14px.-my-4margin-top: -1rem; margin-bottom: -1rem;16px.-mx-4margin-left: -1rem; margin-right: -1rem;16px.-my-5margin-top: -1.25rem; margin-bottom: -1.25rem;20px.-mx-5margin-left: -1.25rem; margin-right: -1.25rem;20px.-my-6margin-top: -1.5rem; margin-bottom: -1.5rem;24px.-mx-6margin-left: -1.5rem; margin-right: -1.5rem;24px.-my-7margin-top: 1.75rem; margin-bottom: 1.75rem;24px.-mx-7margin-left: 1.75rem; margin-right: 1.75rem;24px.-my-8margin-top: -2rem; margin-bottom: -2rem;32px.-mx-8margin-left: -2rem; margin-right: -2rem;32px.-my-9margin-top: 2.25rem; margin-bottom: 2.25rem;36px.-mx-9margin-left: 2.25rem; margin-right: 2.25rem;36px.-my-10margin-top: -2.5rem; margin-bottom: -2.5rem;40px.-mx-10margin-left: -2.5rem; margin-right: -2.5rem;40px.-my-11margin-top: -2.75rem; margin-bottom: -2.75rem;44px.-mx-11margin-left: -2.75rem; margin-right: -2.75rem;44px.-my-12margin-top: -3rem; margin-bottom: -3rem;48px.-mx-12margin-left: -3rem; margin-right: -3rem;48px.-my-14margin-top: -3.5rem; margin-bottom: -3.5rem;56px.-mx-14margin-left: -3.5rem; margin-right: -3.5rem;56px.-my-16margin-top: -4rem; margin-bottom: -4rem;64px.-mx-16margin-left: -4rem; margin-right: -4rem;64px.-my-20margin-top: -5rem; margin-bottom: -5rem;80px.-mx-20margin-left: -5rem; margin-right: -5rem;80px.-my-24margin-top: -6rem; margin-bottom: -6rem;96px.-mx-24margin-left: -6rem; margin-right: -6rem;96px.-my-28margin-top: -7rem; margin-bottom: -7rem;112px.-mx-28margin-left: -7rem; margin-right: -7rem;112px.-my-32margin-top: -8rem; margin-bottom: -8rem;128px.-mx-32margin-left: -8rem; margin-right: -8rem;128px.-my-36margin-top: -9rem; margin-bottom: -9rem;144px.-mx-36margin-left: -9rem; margin-right: -9rem;144px.-my-40margin-top: -10rem; margin-bottom: -10rem;160px.-mx-40margin-left: -10rem; margin-right: -10rem;160px.-my-44margin-top: -11rem; margin-bottom: -11rem;176px.-mx-44margin-left: -11rem; margin-right: -11rem;176px.-my-48margin-top: -12rem; margin-bottom: -12rem;192px.-mx-48margin-left: -12rem; margin-right: -12rem;192px.-my-52margin-top: -13rem; margin-bottom: -13rem;208px.-mx-52margin-left: -13rem; margin-right: -13rem;208px.-my-56margin-top: -14rem; margin-bottom: -14rem;224px.-mx-56margin-left: -14rem; margin-right: -14rem;224px.-my-60margin-top: 15rem; margin-bottom: 15rem;240px.-mx-60margin-left: 15rem; margin-right: 15rem;240px.-my-64margin-top: -16rem; margin-bottom: -16rem;256px.-mx-64margin-left: -16rem; margin-right: -16rem;256px.-my-70margin-top: -18rem; margin-bottom: -18rem;280px.-mx-70margin-left: -18rem; margin-right: -18rem;280px.-my-80margin-top: -20rem; margin-bottom: -20rem;320px.-mx-80margin-left: -20rem; margin-right: -20rem;320px.-my-96margin-top: -24rem; margin-bottom: -24rem;384px.-mx-96margin-left: -24rem; margin-right: -24rem;384px.-my-pxmargin-top: -1px; margin-bottom: -1px;.-mx-pxmargin-left: -1px; margin-right: -1px;.-mt-0margin-top: 0;.-mr-0margin-right: 0;.-mb-0margin-bottom: 0;.-ml-0margin-left: 0;.-mt-0.5margin-top: -0.125rem;2px.-mr-0.5margin-right: -0.125rem;2px.-mb-0.5margin-bottom: -0.125rem;2px.-ml-0.5margin-left: -0.125rem;2px.-mt-1margin-top: -0.25rem;4px.-mr-1margin-right: -0.25rem;4px.-mb-1margin-bottom: -0.25rem;4px.-ml-1margin-left: -0.25rem;4px.-mt-1.5margin-top: -0.375rem;6px.-mr-1.5margin-right: -0.375rem;6px.-mb-1.5margin-bottom: -0.375rem;6px.-ml-1.5margin-left: -0.375rem;6px.-mt-2margin-top: -0.5rem;8px.-mr-2margin-right: -0.5rem;8px.-mb-2margin-bottom: -0.5rem;8px.-ml-2margin-left: -0.5rem;8px.-mt-2.5margin-top: -0.625rem;10px.-mr-2.5margin-right: -0.625rem;10px.-mb-2.5margin-bottom: -0.625rem;10px.-ml-2.5margin-left: -0.625rem;10px.-mt-3margin-top: -0.75rem;12px.-mr-3margin-right: -0.75rem;12px.-mb-3margin-bottom: -0.75rem;12px.-ml-3margin-left: -0.75rem;12px.-mt-3.5margin-top: -0.875rem;14px.-mr-3.5margin-right: -0.875rem;14px.-mb-3.5margin-bottom: -0.875rem;14px.-ml-3.5margin-left: -0.875rem;14px.-mt-4margin-top: -1rem;16px.-mr-4margin-right: -1rem;16px.-mb-4margin-bottom: -1rem;16px.-ml-4margin-left: -1rem;16px.-mt-5margin-top: -1.25rem;20px.-mr-5margin-right: -1.25rem;20px.-mb-5margin-bottom: -1.25rem;20px.-ml-5margin-left: -1.25rem;20px.-mt-6margin-top: -1.5rem;24px.-mr-6margin-right: -1.5rem;24px.-mb-6margin-bottom: -1.5rem;24px.-ml-6margin-left: -1.5rem;24px.-mt-7margin-top: 1.75rem;28px.-mr-7margin-right: 1.75rem;28px.-mb-7margin-bottom: 1.75rem;28px.-ml-7margin-left: 1.75rem;28px.-mt-8margin-top: -2rem;32px.-mr-8margin-right: -2rem;32px.-mb-8margin-bottom: -2rem;32px.-ml-8margin-left: -2rem;32px.-mt-9margin-top: 2.25rem;36px.-mr-9margin-right: 2.25rem;36px.-mb-9margin-bottom: 2.25rem;36px.-ml-9margin-left: 2.25rem;36px.-mt-10margin-top: -2.5rem;40px.-mr-10margin-right: -2.5rem;40px.-mb-10margin-bottom: -2.5rem;40px.-ml-10margin-left: -2.5rem;40px.-mt-11margin-top: -2.75rem;44px.-mr-11margin-right: -2.75rem;44px.-mb-11margin-bottom: -2.75rem;44px.-ml-11margin-left: -2.75rem;44px.-mt-12margin-top: -3rem;48px.-mr-12margin-right: -3rem;48px.-mb-12margin-bottom: -3rem;48px.-ml-12margin-left: -3rem;48px.-mt-14margin-top: -3.5rem;56px.-mr-14margin-right: -3.5rem;56px.-mb-14margin-bottom: -3.5rem;56px.-ml-14margin-left: -3.5rem;56px.-mt-16margin-top: -4rem;64px.-mr-16margin-right: -4rem;64px.-mb-16margin-bottom: -4rem;64px.-ml-16margin-left: -4rem;64px.-mt-20margin-top: -5rem;80px.-mr-20margin-right: -5rem;80px.-mb-20margin-bottom: -5rem;80px.-ml-20margin-left: -5rem;80px.-mt-24margin-top: -6rem;96px.-mr-24margin-right: -6rem;96px.-mb-24margin-bottom: -6rem;96px.-ml-24margin-left: -6rem;96px.-mt-28margin-top: -7rem;112px.-mr-28margin-right: -7rem;112px.-mb-28margin-bottom: -7rem;112px.-ml-28margin-left: -7rem;112px.-mt-32margin-top: -8rem;128px.-mr-32margin-right: -8rem;128px.-mb-32margin-bottom: -8rem;128px.-ml-32margin-left: -8rem;128px.-mt-36margin-top: -9rem;144px.-mr-36margin-right: -9rem;144px.-mb-36margin-bottom: -9rem;144px.-ml-36margin-left: -9rem;144px.-mt-40margin-top: -10rem;160px.-mr-40margin-right: -10rem;160px.-mb-40margin-bottom: -10rem;160px.-ml-40margin-left: -10rem;160px.-mt-44margin-top: -11rem;176px.-mr-44margin-right: -11rem;176px.-mb-44margin-bottom: -11rem;176px.-ml-44margin-left: -11rem;176px.-mt-48margin-top: -12rem;192px.-mr-48margin-right: -12rem;192px.-mb-48margin-bottom: -12rem;192px.-ml-48margin-left: -12rem;192px.-mt-52margin-top: -13rem;208px.-mr-52margin-right: -13rem;208px.-mb-52margin-bottom: -13rem;208px.-ml-52margin-left: -13rem;208px.-mt-56margin-top: -14rem;224px.-mr-56margin-right: -14rem;224px.-mb-56margin-bottom: -14rem;224px.-ml-56margin-left: -14rem;224px.-mt-60margin-top: 15rem;240px.-mr-60margin-right: 15rem;240px.-mb-60margin-bottom: 15rem;240px.-ml-60margin-left: 15rem;240px.-mt-64margin-top: -16rem;256px.-mr-64margin-right: -16rem;256px.-mb-64margin-bottom: -16rem;256px.-ml-64margin-left: -16rem;256px.-mt-72margin-top: -18rem;288px.-mr-72margin-right: -18rem;288px.-mb-72margin-bottom: -18rem;288px.-ml-72margin-left: -18rem;288px.-mt-80margin-top: -20rem;320px.-mr-80margin-right: -20rem;320px.-mb-80margin-bottom: -20rem;320px.-ml-80margin-left: -20rem;320px.-mt-96margin-top: -24rem;384px.-mr-96margin-right: -24rem;384px.-mb-96margin-bottom: -24rem;384px.-ml-96margin-left: -24rem;384px.-mt-pxmargin-top: -1px;.-mr-pxmargin-right: -1px;.-mb-pxmargin-bottom: -1px;.-ml-pxmargin-left: -1px;

Control the space between child elements using margins.

.space-x-0margin-left: 0;.space-x-0.5margin-left: 0.125rem;.space-x-1margin-left: 0.25rem;.space-x-1.5margin-left: 0.375rem;.space-x-2margin-left: 0.5rem;.space-x-2.5margin-left: 0.625rem;.space-x-3margin-left: 0.75rem;.space-x-3margin-left: 0.875rem;.space-x-4margin-left: 1rem;.space-x-5margin-left: 1.25rem;.space-x-6margin-left: 1.5rem;.space-x-7margin-left: 1.75rem;.space-x-8margin-left: 2rem;.space-x-9margin-left: 2.25rem;.space-x-10margin-left: 2.5rem;.space-x-11margin-left: 2.75rem;.space-x-12margin-left: 3rem;.space-x-14margin-left: 3.5rem;.space-x-16margin-left: 4rem;.space-x-20margin-left: 5rem;.space-x-24margin-left: 6rem;.space-x-28margin-left: 7rem;.space-x-32margin-left: 8rem;.space-x-36margin-left: 9rem;.space-x-40margin-left: 10rem;.space-x-44margin-left: 11rem;.space-x-48margin-left: 12rem;.space-x-52margin-left: 13rem;.space-x-56margin-left: 14rem;.space-x-60margin-left: 15rem;.space-x-64margin-left: 16rem;.space-x-72margin-left: 18rem;.space-x-80margin-left: 20rem;.space-x-96margin-left: 24rem;.space-x-pxmargin-left: 1px;.-space-x-0margin-left: 0;.-space-x-0.5margin-left: -0.125rem;.-space-x-1margin-left: -0.25rem;.-space-x-1.5margin-left: -0.375rem;.-space-x-2margin-left: -0.5rem;.-space-x-2.5margin-left: -0.625rem;.-space-x-3margin-left: -0.75rem;.-space-x-3margin-left: -0.875rem;.-space-x-4margin-left: -1rem;.-space-x-5margin-left: -1.25rem;.-space-x-6margin-left: -1.5rem;.-space-x-7margin-left: -1.75rem;.-space-x-8margin-left: -2rem;.-space-x-9margin-left: -2.25rem;.-space-x-10margin-left: -2.5rem;.-space-x-11margin-left: -2.75rem;.-space-x-12margin-left: -3rem;.-space-x-14margin-left: -3.5rem;.-space-x-16margin-left: -4rem;.-space-x-20margin-left: -5rem;.-space-x-24margin-left: -6rem;.-space-x-28margin-left: -7rem;.-space-x-32margin-left: -8rem;.-space-x-36margin-left: -9rem;.-space-x-40margin-left: -10rem;.-space-x-44margin-left: -11rem;.-space-x-48margin-left: -12rem;.-space-x-52margin-left: -13rem;.-space-x-56margin-left: -14rem;.-space-x-60margin-left: -15rem;.-space-x-64margin-left: -16rem;.-space-x-72margin-left: -18rem;.-space-x-80margin-left: -20rem;.-space-x-96margin-left: -24rem;.-space-x-pxmargin-left: -1px;.space-y-0margin-top: 0;.space-y-0.5margin-top: 0.125rem;.space-y-1margin-top: 0.25rem;.space-y-1.5margin-top: 0.375rem;.space-y-2margin-top: 0.5rem;.space-y-2.5margin-top: 0.625rem;.space-y-3margin-top: 0.75rem;.space-y-3margin-top: 0.875rem;.space-y-4margin-top: 1rem;.space-y-5margin-top: 1.25rem;.space-y-6margin-top: 1.5rem;.space-y-7margin-top: 1.75rem;.space-y-8margin-top: 2rem;.space-y-9margin-top: 2.25rem;.space-y-10margin-top: 2.5rem;.space-y-11margin-top: 2.75rem;.space-y-12margin-top: 3rem;.space-y-14margin-top: 3.5rem;.space-y-16margin-top: 4rem;.space-y-20margin-top: 5rem;.space-y-24margin-top: 6rem;.space-y-28margin-top: 7rem;.space-y-32margin-top: 8rem;.space-y-36margin-top: 9rem;.space-y-40margin-top: 10rem;.space-y-44margin-top: 11rem;.space-y-48margin-top: 12rem;.space-y-52margin-top: 13rem;.space-y-56margin-top: 14rem;.space-y-60margin-top: 15rem;.space-y-64margin-top: 16rem;.space-y-72margin-top: 18rem;.space-y-80margin-top: 20rem;.space-y-96margin-top: 24rem;.space-y-pxmargin-top: 1px;.-space-y-0margin-top: 0;.-space-y-0.5margin-top: -0.125rem;.-space-y-1margin-top: -0.25rem;.-space-y-1.5margin-top: -0.375rem;.-space-y-2margin-top: -0.5rem;.-space-y-2.5margin-top: -0.625rem;.-space-y-3margin-top: -0.75rem;.-space-y-3margin-top: -0.875rem;.-space-y-4margin-top: -1rem;.-space-y-5margin-top: -1.25rem;.-space-y-6margin-top: -1.5rem;.-space-y-7margin-top: -1.75rem;.-space-y-8margin-top: -2rem;.-space-y-9margin-top: -2.25rem;.-space-y-10margin-top: -2.5rem;.-space-y-11margin-top: -2.75rem;.-space-y-12margin-top: -3rem;.-space-y-14margin-top: -3.5rem;.-space-y-16margin-top: -4rem;.-space-y-20margin-top: -5rem;.-space-y-24margin-top: -6rem;.-space-y-28margin-top: -7rem;.-space-y-32margin-top: -8rem;.-space-y-36margin-top: -9rem;.-space-y-40margin-top: -10rem;.-space-y-44margin-top: -11rem;.-space-y-48margin-top: -12rem;.-space-y-52margin-top: -13rem;.-space-y-56margin-top: -14rem;.-space-y-60margin-top: -15rem;.-space-y-64margin-top: -16rem;.-space-y-72margin-top: -18rem;.-space-y-80margin-top: -20rem;.-space-y-96margin-top: -24rem;.-space-y-pxmargin-top: -1px;.space-x-reverse--space-x-reverse: 1.space-y-reverse--space-y-reverse: 1

Set whether a background image's position is fixed within the viewport, or scrolls with its containing block.

.bg-fixedbackground-attachment: fixed;.bg-localbackground-attachment: local;.bg-scrollbackground-attachment: scroll;

Set whether an element's background extends underneath its border box, padding box, or content box.

.bg-clip-borderbackground-clip: border-box;.bg-clip-paddingbackground-clip: padding-box;.bg-clip-contentbackground-clip: content-box;.bg-clip-textbackground-clip: text;

Set the background color of an element.

.bg-transparentbackground-color: transparent;.bg-currentbackground-color: currentColor;.bg-blackbackground-color: #000000;.bg-whitebackground-color: #ffffff;.bg-gray-50background-color: #F9FAFB;.bg-gray-100background-color: #F3F4F6;.bg-gray-200background-color: #E5E7EB;.bg-gray-300background-color: #D1D5DB;.bg-gray-400background-color: #9CA3AF;.bg-gray-500background-color: #6B7280;.bg-gray-600background-color: #6B7280;.bg-gray-700background-color: #374151;.bg-gray-800background-color: #1F2937;.bg-gray-900background-color: #111827;.bg-red-50background-color: #FEF2F2;.bg-red-100background-color: #FEE2E2;.bg-red-200background-color: #FECACA;.bg-red-300background-color: #FCA5A5;.bg-red-400background-color: #F87171;.bg-red-500background-color: #EF4444;.bg-red-600background-color: #DC2626;.bg-red-700background-color: #B91C1C;.bg-red-800background-color: #991B1B;.bg-red-900background-color: #7F1D1D;.bg-yellow-50background-color: #FFFBEB;.bg-yellow-100background-color: #FEF3C7;.bg-yellow-200background-color: #FDE68A;.bg-yellow-300background-color: #FCD34D;.bg-yellow-400background-color: #FBBF24;.bg-yellow-500background-color: #F59E0B;.bg-yellow-600background-color: #D97706;.bg-yellow-700background-color: #B45309;.bg-yellow-800background-color: #92400E;.bg-yellow-900background-color: #78350F;.bg-green-50background-color: #ECFDF5;.bg-green-100background-color: #D1FAE5;.bg-green-200background-color: #A7F3D0;.bg-green-300background-color: #6EE7B7;.bg-green-400background-color: #34D399;.bg-green-500background-color: #10B981;.bg-green-600background-color: #059669;.bg-green-700background-color: #047857;.bg-green-800background-color: #065F46;.bg-green-900background-color: #064E3B;.bg-blue-50background-color: #EFF6FF;.bg-blue-100background-color: #DBEAFE;.bg-blue-200background-color: #BFDBFE;.bg-blue-300background-color: #93C5FD;.bg-blue-400background-color: #60A5FA;.bg-blue-500background-color: #3B82F6;.bg-blue-600background-color: #2563EB;.bg-blue-700background-color: #1D4ED8;.bg-blue-800background-color: #1E40AF;.bg-blue-900background-color: #1E3A8A;.bg-indigo-50background-color: #EEF2FF;.bg-indigo-100background-color: #E0E7FF;.bg-indigo-200background-color: #C7D2FE;.bg-indigo-300background-color: #A5B4FC;.bg-indigo-400background-color: #818CF8;.bg-indigo-500background-color: #6366F1;.bg-indigo-600background-color: #4F46E5;.bg-indigo-700background-color: #4338CA;.bg-indigo-800background-color: #3730A3;.bg-indigo-900background-color: #312E81;.bg-purple-50background-color: #F5F3FF;.bg-purple-100background-color: #EDE9FE;.bg-purple-200background-color: #DDD6FE;.bg-purple-300background-color: #C4B5FD;.bg-purple-400background-color: #A78BFA;.bg-purple-500background-color: #8B5CF6;.bg-purple-600background-color: #7C3AED;.bg-purple-700background-color: #6D28D9;.bg-purple-800background-color: #5B21B6;.bg-purple-900background-color: #4C1D95;.bg-pink-50background-color: #FDF2F8;.bg-pink-100background-color: #FCE7F3;.bg-pink-200background-color: #FBCFE8;.bg-pink-300background-color: #F9A8D4;.bg-pink-400background-color: #F472B6;.bg-pink-500background-color: #EC4899;.bg-pink-600background-color: #DB2777;.bg-pink-700background-color: #BE185D;.bg-pink-800background-color: #9D174D;.bg-pink-900background-color: #831843;

Set the opacity of the background of an element.

.bg-opacity-0--bg-opacity: 0;.bg-opacity-5--bg-opacity: 0.5;.bg-opacity-10--bg-opacity: 0.1;.bg-opacity-20--bg-opacity: 0.2;.bg-opacity-25--bg-opacity: 0.25;.bg-opacity-30--bg-opacity: 0.3;.bg-opacity-40--bg-opacity: 0.4;.bg-opacity-50--bg-opacity: 0.5;.bg-opacity-60--bg-opacity: 0.6;.bg-opacity-70--bg-opacity: 0.7;.bg-opacity-75--bg-opacity: 0.75;.bg-opacity-80--bg-opacity: 0.8;.bg-opacity-90--bg-opacity: 0.9;.bg-opacity-95--bg-opacity: 0.95;.bg-opacity-100--bg-opacity: 1;

Set the background's origin: from the border start, inside the border, or inside the padding.

.bg-origin-borderbackground-origin: border-box;.bg-origin-paddingbackground-origin: padding-box;.bg-origin-contentbackground-origin: content-box;

Set the initial position for each background image.

.bg-bottombackground-position: bottom;.bg-centerbackground-position: center;.bg-leftbackground-position: left;.bg-left-bottombackground-position: left bottom;.bg-left-topbackground-position: left top;.bg-rightbackground-position: right;.bg-right-bottombackground-position: right bottom;.bg-right-topbackground-position: right top;.bg-topbackground-position: top;

Set how background images are repeated.

.bg-repeatbackground-repeat: repeat;.bg-no-repeatbackground-repeat: no-repeat;.bg-repeat-xbackground-repeat: repeat-x;.bg-repeat-ybackground-repeat: repeat-y;.bg-repeat-roundbackground-repeat: round;.bg-repeat-spacebackground-repeat: space;

Set the size of the element's background image.

.bg-autobackground-size: auto;.bg-coverbackground-size: cover;.bg-containbackground-size: contain;

Set one or more background images on an element.

.bg-nonebackground-image: none;.bg-gradient-to-tbackground-image:background-image: background-image: linear-gradient(to top, var(--tw-gradient-stops));.bg-gradient-to-trbackground-image: background-image: linear-gradient(to top right, var(--tw-gradient-stops));.bg-gradient-to-rbackground-image: background-image: linear-gradient(to right, var(--tw-gradient-stops));.bg-gradient-to-brbackground-image: background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));.bg-gradient-to-bbackground-image: background-image: linear-gradient(to bottom, var(--tw-gradient-stops));.bg-gradient-to-blbackground-image: background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));.bg-gradient-to-lbackground-image: background-image: linear-gradient(to left, var(--tw-gradient-stops));.bg-gradient-to-tlbackground-image: background-image: linear-gradient(to top left, var(--tw-gradient-stops));

Control the color stops in background gradients.

.from-transparentbackground-color: transparent;.from-currentbackground-color: currentColor;.from-blackbackground-color: #000000;.from-whitebackground-color: #ffffff;.from-gray-50background-color: #F9FAFB;.from-gray-100background-color: #F3F4F6;.from-gray-200background-color: #E5E7EB;.from-gray-300background-color: #D1D5DB;.from-gray-400background-color: #9CA3AF;.from-gray-500background-color: #6B7280;.from-gray-600background-color: #6B7280;.from-gray-700background-color: #374151;.from-gray-800background-color: #1F2937;.from-gray-900background-color: #111827;.from-red-50background-color: #FEF2F2;.from-red-100background-color: #FEE2E2;.from-red-200background-color: #FECACA;.from-red-300background-color: #FCA5A5;.from-red-400background-color: #F87171;.from-red-500background-color: #EF4444;.from-red-600background-color: #DC2626;.from-red-700background-color: #B91C1C;.from-red-800background-color: #991B1B;.from-red-900background-color: #7F1D1D;.from-yellow-50background-color: #FFFBEB;.from-yellow-100background-color: #FEF3C7;.from-yellow-200background-color: #FDE68A;.from-yellow-300background-color: #FCD34D;.from-yellow-400background-color: #FBBF24;.from-yellow-500background-color: #F59E0B;.from-yellow-600background-color: #D97706;.from-yellow-700background-color: #B45309;.from-yellow-800background-color: #92400E;.from-yellow-900background-color: #78350F;.from-green-50background-color: #ECFDF5;.from-green-100background-color: #D1FAE5;.from-green-200background-color: #A7F3D0;.from-green-300background-color: #6EE7B7;.from-green-400background-color: #34D399;.from-green-500background-color: #10B981;.from-green-600background-color: #059669;.from-green-700background-color: #047857;.from-green-800background-color: #065F46;.from-green-900background-color: #064E3B;.from-blue-50background-color: #EFF6FF;.from-blue-100background-color: #DBEAFE;.from-blue-200background-color: #BFDBFE;.from-blue-300background-color: #93C5FD;.from-blue-400background-color: #60A5FA;.from-blue-500background-color: #3B82F6;.from-blue-600background-color: #2563EB;.from-blue-700background-color: #1D4ED8;.from-blue-800background-color: #1E40AF;.from-blue-900background-color: #1E3A8A;.from-indigo-50background-color: #EEF2FF;.from-indigo-100background-color: #E0E7FF;.from-indigo-200background-color: #C7D2FE;.from-indigo-300background-color: #A5B4FC;.from-indigo-400background-color: #818CF8;.from-indigo-500background-color: #6366F1;.from-indigo-600background-color: #4F46E5;.from-indigo-700background-color: #4338CA;.from-indigo-800background-color: #3730A3;.from-indigo-900background-color: #312E81;.from-purple-50background-color: #F5F3FF;.from-purple-100background-color: #EDE9FE;.from-purple-200background-color: #DDD6FE;.from-purple-300background-color: #C4B5FD;.from-purple-400background-color: #A78BFA;.from-purple-500background-color: #8B5CF6;.from-purple-600background-color: #7C3AED;.from-purple-700background-color: #6D28D9;.from-purple-800background-color: #5B21B6;.from-purple-900background-color: #4C1D95;.from-pink-50background-color: #FDF2F8;.from-pink-100background-color: #FCE7F3;.from-pink-200background-color: #FBCFE8;.from-pink-300background-color: #F9A8D4;.from-pink-400background-color: #F472B6;.from-pink-500background-color: #EC4899;.from-pink-600background-color: #DB2777;.from-pink-700background-color: #BE185D;.from-pink-800background-color: #9D174D;.from-pink-900background-color: #831843;.via-transparentbackground-color: transparent;.via-currentbackground-color: currentColor;.via-blackbackground-color: #000000;.via-whitebackground-color: #ffffff;.via-gray-50background-color: #F9FAFB;.via-gray-100background-color: #F3F4F6;.via-gray-200background-color: #E5E7EB;.via-gray-300background-color: #D1D5DB;.via-gray-400background-color: #9CA3AF;.via-gray-500background-color: #6B7280;.via-gray-600background-color: #6B7280;.via-gray-700background-color: #374151;.via-gray-800background-color: #1F2937;.via-gray-900background-color: #111827;.via-red-50background-color: #FEF2F2;.via-red-100background-color: #FEE2E2;.via-red-200background-color: #FECACA;.via-red-300background-color: #FCA5A5;.via-red-400background-color: #F87171;.via-red-500background-color: #EF4444;.via-red-600background-color: #DC2626;.via-red-700background-color: #B91C1C;.via-red-800background-color: #991B1B;.via-red-900background-color: #7F1D1D;.via-yellow-50background-color: #FFFBEB;.via-yellow-100background-color: #FEF3C7;.via-yellow-200background-color: #FDE68A;.via-yellow-300background-color: #FCD34D;.via-yellow-400background-color: #FBBF24;.via-yellow-500background-color: #F59E0B;.via-yellow-600background-color: #D97706;.via-yellow-700background-color: #B45309;.via-yellow-800background-color: #92400E;.via-yellow-900background-color: #78350F;.via-green-50background-color: #ECFDF5;.via-green-100background-color: #D1FAE5;.via-green-200background-color: #A7F3D0;.via-green-300background-color: #6EE7B7;.via-green-400background-color: #34D399;.via-green-500background-color: #10B981;.via-green-600background-color: #059669;.via-green-700background-color: #047857;.via-green-800background-color: #065F46;.via-green-900background-color: #064E3B;.via-blue-50background-color: #EFF6FF;.via-blue-100background-color: #DBEAFE;.via-blue-200background-color: #BFDBFE;.via-blue-300background-color: #93C5FD;.via-blue-400background-color: #60A5FA;.via-blue-500background-color: #3B82F6;.via-blue-600background-color: #2563EB;.via-blue-700background-color: #1D4ED8;.via-blue-800background-color: #1E40AF;.via-blue-900background-color: #1E3A8A;.via-indigo-50background-color: #EEF2FF;.via-indigo-100background-color: #E0E7FF;.via-indigo-200background-color: #C7D2FE;.via-indigo-300background-color: #A5B4FC;.via-indigo-400background-color: #818CF8;.via-indigo-500background-color: #6366F1;.via-indigo-600background-color: #4F46E5;.via-indigo-700background-color: #4338CA;.via-indigo-800background-color: #3730A3;.via-indigo-900background-color: #312E81;.via-purple-50background-color: #F5F3FF;.via-purple-100background-color: #EDE9FE;.via-purple-200background-color: #DDD6FE;.via-purple-300background-color: #C4B5FD;.via-purple-400background-color: #A78BFA;.via-purple-500background-color: #8B5CF6;.via-purple-600background-color: #7C3AED;.via-purple-700background-color: #6D28D9;.via-purple-800background-color: #5B21B6;.via-purple-900background-color: #4C1D95;.via-pink-50background-color: #FDF2F8;.via-pink-100background-color: #FCE7F3;.via-pink-200background-color: #FBCFE8;.via-pink-300background-color: #F9A8D4;.via-pink-400background-color: #F472B6;.via-pink-500background-color: #EC4899;.via-pink-600background-color: #DB2777;.via-pink-700background-color: #BE185D;.via-pink-800background-color: #9D174D;.via-pink-900background-color: #831843;.to-transparentbackground-color: transparent;.to-currentbackground-color: currentColor;.to-blackbackground-color: #000000;.to-whitebackground-color: #ffffff;.to-gray-50background-color: #F9FAFB;.to-gray-100background-color: #F3F4F6;.to-gray-200background-color: #E5E7EB;.to-gray-300background-color: #D1D5DB;.to-gray-400background-color: #9CA3AF;.to-gray-500background-color: #6B7280;.to-gray-600background-color: #6B7280;.to-gray-700background-color: #374151;.to-gray-800background-color: #1F2937;.to-gray-900background-color: #111827;.to-red-50background-color: #FEF2F2;.to-red-100background-color: #FEE2E2;.to-red-200background-color: #FECACA;.to-red-300background-color: #FCA5A5;.to-red-400background-color: #F87171;.to-red-500background-color: #EF4444;.to-red-600background-color: #DC2626;.to-red-700background-color: #B91C1C;.to-red-800background-color: #991B1B;.to-red-900background-color: #7F1D1D;.to-yellow-50background-color: #FFFBEB;.to-yellow-100background-color: #FEF3C7;.to-yellow-200background-color: #FDE68A;.to-yellow-300background-color: #FCD34D;.to-yellow-400background-color: #FBBF24;.to-yellow-500background-color: #F59E0B;.to-yellow-600background-color: #D97706;.to-yellow-700background-color: #B45309;.to-yellow-800background-color: #92400E;.to-yellow-900background-color: #78350F;.to-green-50background-color: #ECFDF5;.to-green-100background-color: #D1FAE5;.to-green-200background-color: #A7F3D0;.to-green-300background-color: #6EE7B7;.to-green-400background-color: #34D399;.to-green-500background-color: #10B981;.to-green-600background-color: #059669;.to-green-700background-color: #047857;.to-green-800background-color: #065F46;.to-green-900background-color: #064E3B;.to-blue-50background-color: #EFF6FF;.to-blue-100background-color: #DBEAFE;.to-blue-200background-color: #BFDBFE;.to-blue-300background-color: #93C5FD;.to-blue-400background-color: #60A5FA;.to-blue-500background-color: #3B82F6;.to-blue-600background-color: #2563EB;.to-blue-700background-color: #1D4ED8;.to-blue-800background-color: #1E40AF;.to-blue-900background-color: #1E3A8A;.to-indigo-50background-color: #EEF2FF;.to-indigo-100background-color: #E0E7FF;.to-indigo-200background-color: #C7D2FE;.to-indigo-300background-color: #A5B4FC;.to-indigo-400background-color: #818CF8;.to-indigo-500background-color: #6366F1;.to-indigo-600background-color: #4F46E5;.to-indigo-700background-color: #4338CA;.to-indigo-800background-color: #3730A3;.to-indigo-900background-color: #312E81;.to-purple-50background-color: #F5F3FF;.to-purple-100background-color: #EDE9FE;.to-purple-200background-color: #DDD6FE;.to-purple-300background-color: #C4B5FD;.to-purple-400background-color: #A78BFA;.to-purple-500background-color: #8B5CF6;.to-purple-600background-color: #7C3AED;.to-purple-700background-color: #6D28D9;.to-purple-800background-color: #5B21B6;.to-purple-900background-color: #4C1D95;.to-pink-50background-color: #FDF2F8;.to-pink-100background-color: #FCE7F3;.to-pink-200background-color: #FBCFE8;.to-pink-300background-color: #F9A8D4;.to-pink-400background-color: #F472B6;.to-pink-500background-color: #EC4899;.to-pink-600background-color: #DB2777;.to-pink-700background-color: #BE185D;.to-pink-800background-color: #9D174D;.to-pink-900background-color: #831843;

Apply graphical effects like blur or color shift to an element.

.filterfilter: 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);.filter-nonefilter: none;

Apply Gaussian blur to an element.

.blur-none--tw-blur: blur(0);.blur-sm--tw-blur: blur(4px);.blur--tw-blur: blur(8px);.blur-md--tw-blur: blur(12px);.blur-lg--tw-blur: blur(16px);.blur-xl--tw-blur: blur(24px);.blur-2xl--tw-blur: blur(40px);.blur-3xl--tw-blur: blur(64px);

Apply a linear multiplier to an element, making it appear brighter or darker.

.brightness-0brightness: brightness(0);.brightness-50brightness: brightness(.5);.brightness-75brightness: brightness(.75);.brightness-90brightness: brightness(.9);.brightness-95brightness: brightness(.95);.brightness-100brightness: brightness(1);.brightness-105brightness: brightness(1.05);.brightness-110brightness: brightness(1.1);.brightness-125brightness: brightness(1.25);.brightness-150brightness: brightness(1.5);.brightness-200brightness: brightness(2);

Adjust the contrast of an element.

.contrast-0contrast: contrast(0);.contrast-50contrast: contrast(.5);.contrast-75contrast: contrast(.75);.contrast-100contrast: contrast(1);.contrast-125contrast: contrast(1.25);.contrast-150contrast: contrast(1.5);.contrast-200contrast: contrast(2);

Apply a drop shadow effect to an element.

.drop-shadow-smdrop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));.drop-shadowdrop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));.drop-shadow-mddrop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));.drop-shadow-lgdrop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));.drop-shadow-xldrop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));.drop-shadow-2xldrop-shadow: drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));.drop-shadow-nonedrop-shadow: drop-shadow: drop-shadow(0 0 #0000);

Apply the grayscale styles to an element.

.grayscale-0grayscale: grayscale(0);.grayscalegrayscale: grayscale(1);

Rotate the hue of an element and its contents.

.-hue-rotate-180hue-rotate: hue-rotate(-180deg);.-hue-rotate-90hue-rotate: hue-rotate(-90deg);.-hue-rotate-60hue-rotate: hue-rotate(-60deg);.-hue-rotate-30hue-rotate: hue-rotate(-30deg);.-hue-rotate-15hue-rotate: hue-rotate(-15deg);.hue-rotate-0hue-rotate: hue-rotate(0deg);.hue-rotate-15hue-rotate: hue-rotate(15deg);.hue-rotate-30hue-rotate: hue-rotate(30deg);.hue-rotate-60hue-rotate: hue-rotate(60deg);.hue-rotate-90hue-rotate: hue-rotate(90deg);.hue-rotate-180hue-rotate: hue-rotate(180deg);

Invert the color samples for an element.

.invert-0invert: invert(0);.invertinvert: invert(1);

Super-saturate or desaturate an element.

.saturate-0saturate: saturate(0);.saturate-50saturate: saturate(.5);.saturate-100saturate: saturate(1);.saturate-150saturate: saturate(1.50);.saturate-200saturate: saturate(2);

Convert an element to sepia, giving it a warmer, more yellow/brown appearance.

.sepia-0sepia: sepia(0);.sepiasepia: sepia(1);

Apply graphical effects such as blurring or color shifting to the area behind an element.

.backdrop-filterbackdrop-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);.backdrop-filter-nonebackdrop-filter: none;

Apply the backdrop blur filter to an element.

.backdrop-blur-0backdrop-blur: blur(0);.backdrop-blur-smbackdrop-blur: blur(4px);.backdrop-blurbackdrop-blur: blur(8px);.backdrop-blur-mdbackdrop-blur: blur(12px);.backdrop-blur-lgbackdrop-blur: blur(16px);.backdrop-blur-xlbackdrop-blur: blur(24px);.backdrop-blur-2xlbackdrop-blur: blur(40px);.backdrop-blur-3xlbackdrop-blur: blur(64px);

Apply the backdrop brightness to an element.

.backdrop-brightness-0backdrop-brightness: brightness(0);.backdrop-brightness-smbackdrop-brightness: brightness(4px);.backdrop-brightnessbackdrop-brightness: brightness(8px);.backdrop-brightness-mdbackdrop-brightness: brightness(12px);.backdrop-brightness-lgbackdrop-brightness: brightness(16px);.backdrop-brightness-xlbackdrop-brightness: brightness(24px);.backdrop-brightness-2xlbackdrop-brightness: brightness(40px);.backdrop-brightness-3xlbackdrop-brightness: brightness(64px);

Apply the backdrop contrast to an element.

.backdrop-contrast-0backdrop-contrast: contrast(0);.backdrop-contrast-50backdrop-contrast: contrast(.5);.backdrop-contrast-75backdrop-contrast: contrast(.75);.backdrop-contrast-100backdrop-contrast: contrast(1);.backdrop-contrast-125backdrop-contrast: contrast(1.25);.backdrop-contrast-150backdrop-contrast: contrast(1.5);.backdrop-contrast-200backdrop-contrast: contrast(2);

Apply the backdrop grayscale to an element.

.backdrop-grayscale-0backdrop-grayscale: grayscale(0);.backdrop-grayscalebackdrop-grayscale: grayscale(1);

Apply the backdrop hue rotate to an element.

.-backdrop-hue-rotate-180backdrop-hue-rotate: hue-rotate(-180deg);.-backdrop-hue-rotate-90backdrop-hue-rotate: hue-rotate(-90deg);.-backdrop-hue-rotate-60backdrop-hue-rotate: hue-rotate(-60deg);.-backdrop-hue-rotate-30backdrop-hue-rotate: hue-rotate(-30deg);.-backdrop-hue-rotate-15backdrop-hue-rotate: hue-rotate(-15deg);.backdrop-hue-rotate-0backdrop-hue-rotate: hue-rotate(0deg);.backdrop-hue-rotate-15backdrop-hue-rotate: hue-rotate(15deg);.backdrop-hue-rotate-30backdrop-hue-rotate: hue-rotate(30deg);.backdrop-hue-rotate-60backdrop-hue-rotate: hue-rotate(60deg);.backdrop-hue-rotate-90backdrop-hue-rotate: hue-rotate(90deg);.backdrop-hue-rotate-180backdrop-hue-rotate: hue-rotate(180deg);

Apply the backdrop invert to an element.

.backdrop-invert-0backdrop-invert: invert(0);.backdrop-invertbackdrop-invert: invert(1);

Apply the backdrop opacity to an element.

.backdrop-opacity-0backdrop-opacity: opacity(0);.backdrop-opacity-5backdrop-opacity: opacity(0.05);.backdrop-opacity-10backdrop-opacity: opacity(0.1);.backdrop-opacity-20backdrop-opacity: opacity(0.2);.backdrop-opacity-25backdrop-opacity: opacity(0.25);.backdrop-opacity-30backdrop-opacity: opacity(0.3);.backdrop-opacity-40backdrop-opacity: opacity(0.4);.backdrop-opacity-50backdrop-opacity: opacity(0.5);.backdrop-opacity-60backdrop-opacity: opacity(0.6);.backdrop-opacity-70backdrop-opacity: opacity(0.7);.backdrop-opacity-75backdrop-opacity: opacity(0.75);.backdrop-opacity-80backdrop-opacity: opacity(0.8);.backdrop-opacity-90backdrop-opacity: opacity(0.9);.backdrop-opacity-95backdrop-opacity: opacity(0.95);.backdrop-opacity-100backdrop-opacity: opacity(1);

Apply the backdrop saturate to an element.

.backdrop-saturate-0backdrop-saturate: saturate(0);.backdrop-saturate-50backdrop-saturate: saturate(.5);.backdrop-saturate-100backdrop-saturate: saturate(1);.backdrop-saturate-150backdrop-saturate: saturate(1.50);.backdrop-saturate-200backdrop-saturate: saturate(2);

Apply the backdrop sepia to an element.

.backdrop-sepia-0backdrop-sepia: sepia(0);.backdrop-sepiabackdrop-sepia: sepia(1);

Set the origin for an element's transformations.

.origin-centertransform-origin: center;.origin-toptransform-origin: top;.origin-top-righttransform-origin: top right;.origin-righttransform-origin: right;.origin-bottom-righttransform-origin: bottom right;.origin-bottomtransform-origin: bottom;.origin-bottom-lefttransform-origin: bottom left;.origin-lefttransform-origin: left;.origin-top-lefttransform-origin: top left;

Define a transformation that resizes an element on the 2D plane.

.scale-0--transform-scale-x: 0; --transform-scale-y: 0;.scale-50--transform-scale-x: .5; --transform-scale-y: .5;.scale-75--transform-scale-x: .75; --transform-scale-y: .75;.scale-90--transform-scale-x: .9; --transform-scale-y: .9;.scale-95--transform-scale-x: .95; --transform-scale-y: .95;.scale-100--transform-scale-x: 1; --transform-scale-y: 1;.scale-105--transform-scale-x: 1.05; --transform-scale-y: 1.05;.scale-110--transform-scale-x: 1.1; --transform-scale-y: 1.1;.scale-125--transform-scale-x: 1.25; --transform-scale-y: 1.25;.scale-150--transform-scale-x: 1.5; --transform-scale-y: 1.5;.scale-x-0--transform-scale-x: 0;.scale-x-50--transform-scale-x: .5;.scale-x-75--transform-scale-x: .75;.scale-x-90--transform-scale-x: .9;.scale-x-95--transform-scale-x: .95;.scale-x-100--transform-scale-x: 1;.scale-x-105--transform-scale-x: 1.05;.scale-x-110--transform-scale-x: 1.1;.scale-x-125--transform-scale-x: 1.25;.scale-x-150--transform-scale-x: 1.5;.scale-y-0--transform-scale-y: 0;.scale-y-50--transform-scale-y: .5;.scale-y-75--transform-scale-y: .75;.scale-y-90--transform-scale-y: .9;.scale-y-95--transform-scale-y: .95;.scale-y-100--transform-scale-y: 1;.scale-y-105--transform-scale-y: 1.05;.scale-y-110--transform-scale-y: 1.1;.scale-y-125--transform-scale-y: 1.25;.scale-y-150--transform-scale-y: 1.5;

Define a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

.rotate-0--transform-rotate: 0;.rotate-1--transform-rotate: 1deg;.rotate-2--transform-rotate: 2deg;.rotate-3--transform-rotate: 3deg;.rotate-6--transform-rotate: 6deg;.rotate-12--transform-rotate: 12deg;.rotate-45--transform-rotate: 45deg;.rotate-90--transform-rotate: 90deg;.rotate-180--transform-rotate: 180deg;.-rotate-180--transform-rotate: -180deg;.-rotate-90--transform-rotate: -90deg;.-rotate-45--transform-rotate: -45deg;.-rotate-12--transform-rotate: -12deg;.-rotate-6--transform-rotate: -6deg;.-rotate-3--transform-rotate: -3deg;.-rotate-2--transform-rotate: -2deg;.-rotate-1--transform-rotate: -1deg;

Reposition an element in the horizontal and/or vertical directions.

.translate-x-0--transform-translate-x: 0;.translate-x-0.5--transform-translate-x: 0.125rem;2px.translate-x-1--transform-translate-x: 0.25rem;4px.translate-x-1.5--transform-translate-x: 0.375rem;6px.translate-x-2--transform-translate-x: 0.5rem;8px.translate-x-2.5--transform-translate-x: 0.625rem;10px.translate-x-3--transform-translate-x: 0.75rem;12px.translate-x-3.5--transform-translate-x: 0.875rem;14px.translate-x-4--transform-translate-x: 1rem;16px.translate-x-5--transform-translate-x: 1.25rem;20px.translate-x-6--transform-translate-x: 1.5rem;24px.translate-x-7--transform-translate-x: 1.75rem;28px.translate-x-8--transform-translate-x: 2rem;32px.translate-x-9--transform-translate-x: 2.25rem;36px.translate-x-10--transform-translate-x: 2.5rem;40px.translate-x-11--transform-translate-x: 2.75rem;44px.translate-x-12--transform-translate-x: 3rem;48px.translate-x-14--transform-translate-x: 3.5rem;56px.translate-x-16--transform-translate-x: 4rem;64px.translate-x-20--transform-translate-x: 5rem;80px.translate-x-24--transform-translate-x: 6rem;96px.translate-x-28--transform-translate-x: 7rem;112px.translate-x-32--transform-translate-x: 8rem;128px.translate-x-36--transform-translate-x: 8rem;144px.translate-x-40--transform-translate-x: 10rem;160px.translate-x-44--transform-translate-x: 11rem;176px.translate-x-48--transform-translate-x: 12rem;192px.translate-x-52--transform-translate-x: 13rem;208px.translate-x-56--transform-translate-x: 14rem;224px.translate-x-60--transform-translate-x: 15rem;240px.translate-x-64--transform-translate-x: 16rem;256px.translate-x-72--transform-translate-x: 18rem;288px.translate-x-80--transform-translate-x: 20rem;320px.translate-x-96--transform-translate-x: 24rem;384px.translate-x-px--transform-translate-x: 1px;.translate-x-1/2--transform-translate-x: 50%;.translate-x-1/3--transform-translate-x: 33.333333%;.translate-x-2/3--transform-translate-x: 66.6666666%;.translate-x-1/4--transform-translate-x: 25%;.translate-x-2/4--transform-translate-x: 50%;.translate-x-3/4--transform-translate-x: 75%;.translate-x-full--transform-translate-x: 100%;.-translate-x-0--transform-translate-x: 0;.-translate-x-0.5--transform-translate-x: -0.125rem;2px.-translate-x-1--transform-translate-x: -0.25rem;4px.-translate-x-1.5--transform-translate-x: -0.375rem;6px.-translate-x-2--transform-translate-x: -0.5rem;8px.-translate-x-2.5--transform-translate-x: -0.625rem;10px.-translate-x-3--transform-translate-x: -0.75rem;12px.-translate-x-3.5--transform-translate-x: -0.875rem;14px.-translate-x-4--transform-translate-x: -1rem;16px.-translate-x-5--transform-translate-x: -1.25rem;20px.-translate-x-6--transform-translate-x: -1.5rem;24px.-translate-x-7--transform-translate-x: -1.75rem;28px.-translate-x-8--transform-translate-x: -2rem;32px.-translate-x-9--transform-translate-x: -2.25rem;36px.-translate-x-10--transform-translate-x: -2.5rem;40px.-translate-x-11--transform-translate-x: -2.75rem;44px.-translate-x-12--transform-translate-x: -3rem;48px.-translate-x-14--transform-translate-x: -3.5rem;56px.-translate-x-16--transform-translate-x: -4rem;64px.-translate-x-20--transform-translate-x: -5rem;80px.-translate-x-24--transform-translate-x: -6rem;96px.-translate-x-28--transform-translate-x: -7rem;112px.-translate-x-32--transform-translate-x: -8rem;128px.-translate-x-36--transform-translate-x: -8rem;144px.-translate-x-40--transform-translate-x: -10rem;160px.-translate-x-44--transform-translate-x: -11rem;176px.-translate-x-48--transform-translate-x: -12rem;192px.-translate-x-52--transform-translate-x: -13rem;208px.-translate-x-56--transform-translate-x: -14rem;224px.-translate-x-60--transform-translate-x: -15rem;240px.-translate-x-64--transform-translate-x: -16rem;256px.-translate-x-72--transform-translate-x: -18rem;288px.-translate-x-80--transform-translate-x: -20rem;320px.-translate-x-96--transform-translate-x: -24rem;384px.-translate-x-px--transform-translate-x: -1px;.-translate-x-1/2--transform-translate-x: -50%;.-translate-x-1/3--transform-translate-x: -33.333333%;.-translate-x-2/3--transform-translate-x: -66.6666666%;.-translate-x-1/4--transform-translate-x: -25%;.-translate-x-2/4--transform-translate-x: -50%;.-translate-x-3/4--transform-translate-x: -75%;.-translate-x-full--transform-translate-x: -100%;.translate-y-0--transform-translate-y: 0;.translate-y-0.5--transform-translate-y: 0.125rem;2px.translate-y-1--transform-translate-y: 0.25rem;4px.translate-y-1.5--transform-translate-y: 0.375rem;6px.translate-y-2--transform-translate-y: 0.5rem;8px.translate-y-2.5--transform-translate-y: 0.625rem;10px.translate-y-3--transform-translate-y: 0.75rem;12px.translate-y-3.5--transform-translate-y: 0.875rem;14px.translate-y-4--transform-translate-y: 1rem;16px.translate-y-5--transform-translate-y: 1.25rem;20px.translate-y-6--transform-translate-y: 1.5rem;24px.translate-y-7--transform-translate-y: 1.75rem;28px.translate-y-8--transform-translate-y: 2rem;32px.translate-y-9--transform-translate-y: 2.25rem;36px.translate-y-10--transform-translate-y: 2.5rem;40px.translate-y-11--transform-translate-y: 2.75rem;44px.translate-y-12--transform-translate-y: 3rem;48px.translate-y-14--transform-translate-y: 3.5rem;56px.translate-y-16--transform-translate-y: 4rem;64px.translate-y-20--transform-translate-y: 5rem;80px.translate-y-24--transform-translate-y: 6rem;96px.translate-y-28--transform-translate-y: 7rem;112px.translate-y-32--transform-translate-y: 8rem;128px.translate-y-36--transform-translate-y: 8rem;144px.translate-y-40--transform-translate-y: 10rem;160px.translate-y-44--transform-translate-y: 11rem;176px.translate-y-48--transform-translate-y: 12rem;192px.translate-y-52--transform-translate-y: 13rem;208px.translate-y-56--transform-translate-y: 14rem;224px.translate-y-60--transform-translate-y: 15rem;240px.translate-y-64--transform-translate-y: 16rem;256px.translate-y-72--transform-translate-y: 18rem;288px.translate-y-80--transform-translate-y: 20rem;320px.translate-y-96--transform-translate-y: 24rem;384px.translate-y-px--transform-translate-y: 1px;.translate-y-1/2--transform-translate-y: 50%;.translate-y-1/3--transform-translate-y: 33.333333%;.translate-y-2/3--transform-translate-y: 66.6666666%;.translate-y-1/4--transform-translate-y: 25%;.translate-y-2/4--transform-translate-y: 50%;.translate-y-3/4--transform-translate-y: 75%;.translate-y-full--transform-translate-y: 100%;.-translate-y-0--transform-translate-y: 0;.-translate-y-0.5--transform-translate-y: -0.125rem;2px.-translate-y-1--transform-translate-y: -0.25rem;4px.-translate-y-1.5--transform-translate-y: -0.375rem;6px.-translate-y-2--transform-translate-y: -0.5rem;8px.-translate-y-2.5--transform-translate-y: -0.625rem;10px.-translate-y-3--transform-translate-y: -0.75rem;12px.-translate-y-3.5--transform-translate-y: -0.875rem;14px.-translate-y-4--transform-translate-y: -1rem;16px.-translate-y-5--transform-translate-y: -1.25rem;20px.-translate-y-6--transform-translate-y: -1.5rem;24px.-translate-y-7--transform-translate-y: -1.75rem;28px.-translate-y-8--transform-translate-y: -2rem;32px.-translate-y-9--transform-translate-y: -2.25rem;36px.-translate-y-10--transform-translate-y: -2.5rem;40px.-translate-y-11--transform-translate-y: -2.75rem;44px.-translate-y-12--transform-translate-y: -3rem;48px.-translate-y-14--transform-translate-y: -3.5rem;56px.-translate-y-16--transform-translate-y: -4rem;64px.-translate-y-20--transform-translate-y: -5rem;80px.-translate-y-24--transform-translate-y: -6rem;96px.-translate-y-28--transform-translate-y: -7rem;112px.-translate-y-32--transform-translate-y: -8rem;128px.-translate-y-36--transform-translate-y: -8rem;144px.-translate-y-40--transform-translate-y: -10rem;160px.-translate-y-44--transform-translate-y: -11rem;176px.-translate-y-48--transform-translate-y: -12rem;192px.-translate-y-52--transform-translate-y: -13rem;208px.-translate-y-56--transform-translate-y: -14rem;224px.-translate-y-60--transform-translate-y: -15rem;240px.-translate-y-64--transform-translate-y: -16rem;256px.-translate-y-72--transform-translate-y: -18rem;288px.-translate-y-80--transform-translate-y: -20rem;320px.-translate-y-96--transform-translate-y: -24rem;384px.-translate-y-px--transform-translate-y: -1px;.-translate-y-1/2--transform-translate-y: -50%;.-translate-y-1/3--transform-translate-y: -33.333333%;.-translate-y-2/3--transform-translate-y: -66.6666666%;.-translate-y-1/4--transform-translate-y: -25%;.-translate-y-2/4--transform-translate-y: -50%;.-translate-y-3/4--transform-translate-y: -75%;.-translate-y-full--transform-translate-y: -100%;

Define a transformation that skews an element on the 2D plane.

.skew-x-0--transform-skew-x: 0;.skew-x-1--transform-skew-x: 1deg;.skew-x-2--transform-skew-x: 2deg;.skew-x-3--transform-skew-x: 3deg;.skew-x-6--transform-skew-x: 6deg;.skew-x-12--transform-skew-x: 12deg;.-skew-x-12--transform-skew-x: -12deg;.-skew-x-6--transform-skew-x: -6deg;.-skew-x-3--transform-skew-x: -3deg;.-skew-x-2--transform-skew-x: -2deg;.-skew-x-1--transform-skew-x: -1deg;.skew-y-0--transform-skew-y: 0;.skew-y-1--transform-skew-y: 1deg;.skew-y-2--transform-skew-y: 2deg;.skew-y-3--transform-skew-y: 3deg;.skew-y-6--transform-skew-y: 6deg;.skew-y-12--transform-skew-y: 12deg;.-skew-y-12--transform-skew-y: -12deg;.-skew-y-6--transform-skew-y: -6deg;.-skew-y-3--transform-skew-y: -3deg;.-skew-y-2--transform-skew-y: -2deg;.-skew-y-1--transform-skew-x: -1deg;

Define how the browser distributes space between and around content items along the main-axis of a flex container.

.justify-startjustify-content: flex-start;.justify-centerjustify-content: center;.justify-endjustify-content: flex-end;.justify-betweenjustify-content: space-between;.justify-aroundjustify-content: space-around;.justify-evenlyjustify-content: space-evenly;

Define the default justify-self for all items of the box.

.justify-items-stretchjustify-items: stretch;.justify-items-startjustify-items: start;.justify-items-centerjustify-items: center;.justify-items-endjustify-items: end;.justify-items-autojustify-items: auto;

Set the way a box is justified inside its alignment container along the appropriate axis.

.justify-self-stretchjustify-self: stretch;.justify-self-startjustify-self: start;.justify-self-centerjustify-self: center;.justify-self-endjustify-self: end;.justify-self-autojustify-self: auto;

Set the distribution of space between and around content items.

.content-startalign-content: flex-start;.content-centeralign-content: center;.content-endalign-content: flex-end;.content-betweenalign-content: space-between;.content-aroundalign-content: space-around;.content-evenlyalign-content: space-evenly;

Set the align-self value on all direct children as a group.

.items-stretchalign-items: stretch;.items-startalign-items: flex-start;.items-centeralign-items: center;.items-endalign-items: flex-end;.items-baselinealign-items: baseline;

Override a grid or flex item's align-items value.

.self-autoalign-self: auto;.self-startalign-self: flex-start;.self-centeralign-self: center;.self-endalign-self: flex-end;.self-stretchalign-self: stretch;.self-baselinealign-self: baseline;

Align content along both the block and inline directions at once.

.place-content-startplace-content: start;.place-content-centerplace-content: center;.place-content-endplace-content: end;.place-content-betweenplace-content: space-between;.place-content-aroundplace-content: space-around;.place-content-evenlyplace-content: space-evenly;

Align items along both the block and inline directions.

.place-items-stretchplace-items: stretch;.place-items-startplace-items: start;.place-items-centerplace-items: center;.place-items-endplace-items: end;

Align an individual item in both the block and inline directions.

.place-self-autoplace-self: auto;.place-self-startplace-self: start;.place-self-centerplace-self: center;.place-self-endplace-self: end;.place-self-stretchplace-self: stretch;

Set how a flex item will grow or shrink to fit the space available in its flex container.

.flexdisplay: flex;.inline-flexdisplay: inline-flex;

Set how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

.flex-rowflex-direction: row;.flex-row-reverseflex-direction: row-reverse;.flex-colflex-direction: column;.flex-col-reverseflex-direction: column-reverse;

Set whether flex items are forced onto one line or can wrap onto multiple lines.

.flex-nowrapflex-wrap: nowrap;.flex-wrapflex-wrap: wrap;.flex-wrap-reverseflex-wrap: wrap-reverse;

Set how a flex item will grow or shrink to fit the space available in its flex container.

.flex-1flex: 1 1 0%;.flex-autoflex: 1 1 auto;.flex-initialflex: 0 1 auto;.flex-noneflex: none;

Set the flex grow factor of a flex item's main size.

.flex-growflex-grow: 1;.flex-grow-0flex-grow: 0;

Set the flex shrink factor of a flex item.

.flex-shrinkflex-shrink: 1;.flex-shrink-0flex-shrink: 0;

Set the order to lay out an item in a flex or grid container.

.order-firstorder: -9999;.order-lastorder: 9999;.order-noneorder: 0;.order-1order: 1;.order-2order: 2;.order-3order: 3;.order-4order: 4;.order-5order: 5;.order-6order: 6;.order-7order: 7;.order-8order: 8;.order-9order: 9;.order-10order: 10;.order-11order: 11;.order-12order: 12;

Set the width of an element.

.w-0width: 0;.w-0.5width: 0.125rem;2px.w-1width: 0.25rem;4px.w-1.5width: 0.375rem;6px.w-2width: 0.5rem;8px.w-2.5width: 0.625rem;10px.w-3width: 0.75rem;12px.w-3.5width: 0.875rem;14px.w-4width: 1rem;16px.w-5width: 1.25rem;20px.w-6width: 1.5rem;24px.w-8width: 2rem;32px.w-10width: 2.5rem;40px.w-11width: 2.75rem;44px.w-12width: 3rem;48px.w-14width: 3.5rem;56px.w-16width: 4rem;64px.w-20width: 5rem;80px.w-24width: 6rem;96px.w-28width: 7rem;112px.w-32width: 8rem;128px.w-36width: 9rem;144px.w-40width: 10rem;160px.w-44width: 11rem;176px.w-48width: 12rem;192px.w-52width: 13rem;208px.w-56width: 14rem;224px.w-64width: 16rem;256px.w-72width: 18rem;288px.w-80width: 20rem;320px.w-96width: 24rem;384px.w-pxwidth: 1px;.w-autowidth: auto;.w-1/2width: 50%;.w-1/3width: 33.333333%;.w-2/3width: 66.666667%;.w-1/4width: 25%;.w-2/4width: 50%;.w-3/4width: 75%;.w-1/5width: 20%;.w-2/5width: 40%;.w-3/5width: 60%;.w-4/5width: 80%;.w-1/6width: 16.666667%;.w-2/6width: 33.333333%;.w-3/6width: 50%;.w-4/6width: 66.666667%;.w-5/6width: 83.333333%;.w-1/12width: 8.333333%;.w-2/12width: 16.666667%;.w-3/12width: 25%;.w-4/12width: 33.333333%;.w-5/12width: 41.666667%;.w-6/12width: 50%;.w-7/12width: 58.333333%;.w-8/12width: 66.666667%;.w-9/12width: 75%;.w-10/12width: 83.333333%;.w-11/12width: 91.666667%;.w-fullwidth: 100%;.w-screenwidth: 100vw;.w-minwidth: min-content;.w-maxwidth: max-content;

Set the minimum width of an element.

.min-w-0min-width: 0;.min-w-fullmin-width: 100%;.min-w-minmin-width: min-content;.min-w-maxmin-width: max-content;

Set the maximum width of an element.

.max-w-0max-width: 0rem;.max-w-nonemax-width: none;.max-w-xsmax-width: 20rem;320px.max-w-smmax-width: 24rem;384px.max-w-mdmax-width: 28rem;448px.max-w-lgmax-width: 32rem;512px.max-w-xlmax-width: 36rem;576px.max-w-2xlmax-width: 42rem;672px.max-w-3xlmax-width: 48rem;768px.max-w-4xlmax-width: 56rem;896px.max-w-5xlmax-width: 64rem;1024px.max-w-6xlmax-width: 72rem;1152px.max-w-7xlmax-width: 80rem;1280px.max-w-fullmax-width: 100%;.max-w-minmax-width: min-content;.max-w-maxmax-width: max-content;.max-w-prosemax-width: 65ch;.max-w-screen-smmax-width: 640px;.max-w-screen-mdmax-width: 768px;.max-w-screen-lgmax-width: 1024px;.max-w-screen-xlmax-width: 1280px;.max-w-screen-2xlmax-width: 1536px;

Set the height of an element.

.h-0height: 0;.h-0.5height: 0.125rem;2px.h-1height: 0.25rem;4px.h-1.5height: 0.375rem;6px.h-2height: 0.5rem;8px.h-2.5height: 0.625rem;10px.h-3height: 0.75rem;12px.h-3.5height: 0.875rem;14px.h-4height: 1rem;16px.h-5height: 1.25rem;20px.h-6height: 1.5rem;24px.h-8height: 2rem;32px.h-10height: 2.5rem;40px.h-11height: 2.75rem;44px.h-12height: 3rem;48px.h-14height: 3.5rem;56px.h-16height: 4rem;64px.h-20height: 5rem;80px.h-24height: 6rem;96px.h-28height: 7rem;112px.h-32height: 8rem;128px.h-36height: 9rem;144px.h-40height: 10rem;160px.h-44height: 11rem;176px.h-48height: 12rem;192px.h-52height: 13rem;208px.h-56height: 14rem;224px.h-64height: 16rem;256px.h-72height: 18rem;288px.h-80height: 20rem;320px.h-96height: 24rem;384px.h-pxheight: 1px;.h-autoheight: auto;.h-1/2height: 50%;.h-1/3height: 33.333333%;.h-2/3height: 66.666667%;.h-1/4height: 25%;.h-2/4height: 50%;.h-3/4height: 75%;.h-1/5height: 20%;.h-2/5height: 40%;.h-3/5height: 60%;.h-4/5height: 80%;.h-1/6height: 16.666667%;.h-2/6height: 33.333333%;.h-3/6height: 50%;.h-4/6height: 66.666667%;.h-5/6height: 83.333333%;.h-fullheight: 100%;.h-screenheight: 100vh;

Set the minimum height of an element.

.min-h-0min-height: 0;.min-h-fullmin-height: 100%;.min-h-screenmin-height: 100vh;

Set the maximum height of an element.

.max-h-0max-height: 0;.max-h-0.5max-height: 0.125rem;2px.max-h-1max-height: 0.25rem;4px.max-h-1.5max-height: 0.375rem;6px.max-h-2max-height: 0.5rem;8px.max-h-2.5max-height: 0.625rem;10px.max-h-3max-height: 0.75rem;12px.max-h-3.5max-height: 0.875rem;14px.max-h-4max-height: 1rem;16px.max-h-5max-height: 1.25rem;20px.max-h-6max-height: 1.5rem;24px.max-h-8max-height: 2rem;32px.max-h-10max-height: 2.5rem;40px.max-h-11max-height: 2.75rem;44px.max-h-12max-height: 3rem;48px.max-h-14max-height: 3.5rem;56px.max-h-16max-height: 4rem;64px.max-h-20max-height: 5rem;80px.max-h-24max-height: 6rem;96px.max-h-28max-height: 7rem;112px.max-h-32max-height: 8rem;128px.max-h-36max-height: 9rem;144px.max-h-40max-height: 10rem;160px.max-h-44max-height: 11rem;176px.max-h-48max-height: 12rem;192px.max-h-52max-height: 13rem;208px.max-h-56max-height: 14rem;224px.max-h-64max-height: 16rem;256px.max-h-72max-height: 18rem;288px.max-h-80max-height: 20rem;320px.max-h-96max-height: 24rem;384px.max-h-pxmax-height: 1px;.max-h-fullmax-height: 100%;.max-h-screenmax-height: 100vh;

Round the corners of an element's outer border edge.

.rounded-noneborder-radius: 0;.rounded-smborder-radius: 0.125rem;2px.roundedborder-radius: 0.25rem;4px.rounded-mdborder-radius: 0.375rem;6px.rounded-lgborder-radius: 0.5rem;8px.rounded-xlborder-radius: 0.75rem;10px.rounded-2xlborder-radius: 1rem;12px.rounded-3xlborder-radius: 1.5rem;16px.rounded-fullborder-radius: 9999px;.rounded-t-noneborder-top-left-radius: 0; border-top-right-radius: 0;.rounded-r-noneborder-top-right-radius: 0; border-bottom-right-radius: 0;.rounded-b-noneborder-bottom-right-radius: 0; border-bottom-left-radius: 0;.rounded-l-noneborder-top-left-radius: 0; border-bottom-left-radius: 0;.rounded-t-smborder-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;2px.rounded-r-smborder-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;2px.rounded-b-smborder-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem;2px.rounded-l-smborder-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;2px.rounded-tborder-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;4px.rounded-rborder-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;4px.rounded-bborder-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;4px.rounded-lborder-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;4px.rounded-t-mdborder-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;6px.rounded-r-mdborder-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;6px.rounded-b-mdborder-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem;6px.rounded-l-mdborder-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;6px.rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;8px.rounded-r-lgborder-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;8px.rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;8px.rounded-l-lgborder-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;8px.rounded-t-xlborder-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;10px.rounded-r-xlborder-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;10px.rounded-b-xlborder-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem;10px.rounded-l-xlborder-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;10px.rounded-t-2xlborder-top-left-radius: 1rem; border-top-right-radius: 1rem;12px.rounded-r-2xlborder-top-right-radius: 1rem; border-bottom-right-radius: 1rem;12px.rounded-b-2xlborder-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem;12px.rounded-l-2xlborder-top-left-radius: 1rem; border-bottom-left-radius: 1rem;12px.rounded-t-3xlborder-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;16px.rounded-r-3xlborder-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;16px.rounded-b-3xlborder-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem;16px.rounded-l-3xlborder-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;16px.rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;.rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px;.rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;.rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px;.rounded-tl-noneborder-top-left-radius: 0;.rounded-tr-noneborder-top-right-radius: 0;.rounded-br-noneborder-bottom-right-radius: 0;.rounded-bl-noneborder-bottom-left-radius: 0;.rounded-tl-smborder-top-left-radius: 0.125rem;2px.rounded-tr-smborder-top-right-radius: 0.125rem;2px.rounded-br-smborder-bottom-right-radius: 0.125rem;2px.rounded-bl-smborder-bottom-left-radius: 0.125rem;2px.rounded-tlborder-top-left-radius: 0.25rem;4px.rounded-trborder-top-right-radius: 0.25rem;4px.rounded-brborder-bottom-right-radius: 0.25rem;4px.rounded-blborder-bottom-left-radius: 0.25rem;4px.rounded-tl-mdborder-top-left-radius: 0.375rem;6px.rounded-tr-mdborder-top-right-radius: 0.375rem;6px.rounded-br-mdborder-bottom-right-radius: 0.375rem;6px.rounded-bl-mdborder-bottom-left-radius: 0.375rem;6px.rounded-tl-lgborder-top-left-radius: 0.5rem;8px.rounded-tr-lgborder-top-right-radius: 0.5rem;8px.rounded-br-lgborder-bottom-right-radius: 0.5rem;8px.rounded-bl-lgborder-bottom-left-radius: 0.5rem;8px.rounded-tl-xlborder-top-left-radius: 0.75rem;10px.rounded-tr-xlborder-top-right-radius: 0.75rem;10px.rounded-br-xlborder-bottom-right-radius: 0.75rem;10px.rounded-bl-xlborder-bottom-left-radius: 0.75rem;10px.rounded-tl-2xlborder-top-left-radius: 1rem;12px.rounded-tr-2xlborder-top-right-radius: 1rem;12px.rounded-br-2xlborder-bottom-right-radius: 1rem;12px.rounded-bl-2xlborder-bottom-left-radius: 1rem;12px.rounded-tl-3xlborder-top-left-radius: 1.5rem;16px.rounded-tr-3xlborder-top-right-radius: 1.5rem;16px.rounded-br-3xlborder-bottom-right-radius: 1.5rem;16px.rounded-bl-3xlborder-bottom-left-radius: 1.5rem;16px.rounded-tl-fullborder-top-left-radius: 9999px;.rounded-tr-fullborder-top-right-radius: 9999px;.rounded-br-fullborder-bottom-right-radius: 9999px;.rounded-bl-fullborder-bottom-left-radius: 9999px;

Set the width of an element's border.

.borderborder-width: 1px;.border-0border-width: 0;.border-2border-width: 2px;.border-4border-width: 4px;.border-8border-width: 8px;.border-tborder-top-width: 1px;.border-t-0border-top-width: 0;.border-t-2border-top-width: 2px;.border-t-4border-top-width: 4px;.border-t-8border-top-width: 8px;.border-rborder-right-width: 1px;.border-r-0border-right-width: 0;.border-r-2border-right-width: 2px;.border-r-4border-right-width: 4px;.border-r-8border-right-width: 8px;.border-bborder-bottom-width: 1px;.border-b-0border-bottom-width: 0;.border-b-2border-bottom-width: 2px;.border-b-4border-bottom-width: 4px;.border-b-8border-bottom-width: 8px;.border-lborder-left-width: 1px;.border-l-0border-left-width: 0;.border-l-2border-left-width: 2px;.border-l-4border-left-width: 4px;.border-l-8border-left-width: 8px;

Set the color of an element's border.

.border-transparentborder-color: transparent;.border-currentborder-color: currentColor;.border-blackborder-color: #000000;.border-whiteborder-color: #ffffff;.border-gray-50border-color: #F9FAFB;.border-gray-100border-color: #F3F4F6;.border-gray-200border-color: #E5E7EB;.border-gray-300border-color: #D1D5DB;.border-gray-400border-color: #9CA3AF;.border-gray-500border-color: #6B7280;.border-gray-600border-color: #4B5563;.border-gray-700border-color: #374151;.border-gray-800border-color: #1F2937;.border-gray-900border-color: #111827;.border-red-50border-color: #FEF2F2;.border-red-100border-color: #FEE2E2;.border-red-200border-color: #FECACA;.border-red-300border-color: #FCA5A5;.border-red-400border-color: #F87171;.border-red-500border-color: #EF4444;.border-red-600border-color: #DC2626;.border-red-700border-color: #B91C1C;.border-red-800border-color: #991B1B;.border-red-900border-color: #7F1D1D;.border-yellow-50border-color: #FFFBEB;.border-yellow-100border-color: #FEF3C7;.border-yellow-200border-color: #FDE68A;.border-yellow-300border-color: #FCD34D;.border-yellow-400border-color: #FBBF24;.border-yellow-500border-color: #F59E0B;.border-yellow-600border-color: #D97706;.border-yellow-700border-color: #B45309;.border-yellow-800border-color: #92400E;.border-yellow-900border-color: #78350F;.border-green-50border-color: #ECFDF5;.border-green-100border-color: #D1FAE5;.border-green-200border-color: #A7F3D0;.border-green-300border-color: #6EE7B7;.border-green-400border-color: #34D399;.border-green-500border-color: #10B981;.border-green-600border-color: #059669;.border-green-700border-color: #047857;.border-green-800border-color: #065F46;.border-green-900border-color: #064E3B;.border-blue-50border-color: #EFF6FF;.border-blue-100border-color: #DBEAFE;.border-blue-200border-color: #BFDBFE;.border-blue-300border-color: #93C5FD;.border-blue-400border-color: #60A5FA;.border-blue-500border-color: #3B82F6;.border-blue-600border-color: #2563EB;.border-blue-700border-color: #1D4ED8;.border-blue-800border-color: #1E40AF;.border-blue-900border-color: #1E3A8A;.border-indigo-50border-color: #EEF2FF;.border-indigo-100border-color: #E0E7FF;.border-indigo-200border-color: #C7D2FE;.border-indigo-300border-color: #A5B4FC;.border-indigo-400border-color: #818CF8;.border-indigo-500border-color: #6366F1;.border-indigo-600border-color: #4F46E5;.border-indigo-700border-color: #4338CA;.border-indigo-800border-color: #3730A3;.border-indigo-900border-color: #312E81;.border-purple-50border-color: #F5F3FF;.border-purple-100border-color: #EDE9FE;.border-purple-200border-color: #DDD6FE;.border-purple-300border-color: #C4B5FD;.border-purple-400border-color: #A78BFA;.border-purple-500border-color: #8B5CF6;.border-purple-600border-color: #7C3AED;.border-purple-700border-color: #6D28D9;.border-purple-800border-color: #5B21B6;.border-purple-900border-color: #4C1D95;.border-pink-50border-color: #FDF2F8;.border-pink-100border-color: #FCE7F3;.border-pink-200border-color: #FBCFE8;.border-pink-300border-color: #F9A8D4;.border-pink-400border-color: #F472B6;.border-pink-500border-color: #EC4899;.border-pink-600border-color: #DB2777;.border-pink-700border-color: #BE185D;.border-pink-800border-color: #9D174D;.border-pink-900border-color: #831843;

Set the opacity of an element's border.

.border-opacity-0border-opacity: 0;.border-opacity-5border-opacity: 0.05;.border-opacity-10border-opacity: 0.1;.border-opacity-20border-opacity: 0.2;.border-opacity-25border-opacity: 0.25;.border-opacity-30border-opacity: 0.3;.border-opacity-40border-opacity: 0.4;.border-opacity-50border-opacity: 0.5;.border-opacity-60border-opacity: 0.6;.border-opacity-70border-opacity: 0.7;.border-opacity-75border-opacity: 0.75;.border-opacity-80border-opacity: 0.8;.border-opacity-90border-opacity: 0.9;.border-opacity-100border-opacity: 1;

Set the style of an element's border.

.border-solidborder-style: solid;.border-dashedborder-style: dashed;.border-dottedborder-style: dotted;.border-doubleborder-style: double;.border-noneborder-style: none;

Set the border width between elements.

.divide-x-0border-left-width: 0;.divide-x-2border-left-width: 2px;.divide-x-4border-left-width: 4px;.divide-x-8border-left-width: 8px;.divide-xborder-left-width: 1px;.divide-y-0border-top-width: 0;.divide-y-2border-top-width: 2px;.divide-y-4border-top-width: 4px;.divide-y-8border-top-width: 8px;.divide-yborder-top-width: 1px;.divide-x-reverse--divide-x-reverse: 1.divide-y-reverse--divide-y-reverse: 1

Set the border color between elements.

.divide-transparentborder-color: transparent;.divide-currentborder-color: currentColor;.divide-blackborder-color: #000000;.divide-whiteborder-color: #ffffff;.divide-gray-50border-color: #F9FAFB;.divide-gray-100border-color: #F3F4F6;.divide-gray-200border-color: #E5E7EB;.divide-gray-300border-color: #D1D5DB;.divide-gray-400border-color: #9CA3AF;.divide-gray-500border-color: #6B7280;.divide-gray-600border-color: #4B5563;.divide-gray-700border-color: #374151;.divide-gray-800border-color: #1F2937;.divide-gray-900border-color: #111827;.divide-red-50border-color: #FEF2F2;.divide-red-100border-color: #FEE2E2;.divide-red-200border-color: #FECACA;.divide-red-300border-color: #FCA5A5;.divide-red-400border-color: #F87171;.divide-red-500border-color: #EF4444;.divide-red-600border-color: #DC2626;.divide-red-700border-color: #B91C1C;.divide-red-800border-color: #991B1B;.divide-red-900border-color: #7F1D1D;.divide-yellow-50border-color: #FFFBEB;.divide-yellow-100border-color: #FEF3C7;.divide-yellow-200border-color: #FDE68A;.divide-yellow-300border-color: #FCD34D;.divide-yellow-400border-color: #FBBF24;.divide-yellow-500border-color: #F59E0B;.divide-yellow-600border-color: #D97706;.divide-yellow-700border-color: #B45309;.divide-yellow-800border-color: #92400E;.divide-yellow-900border-color: #78350F;.divide-green-50border-color: #ECFDF5;.divide-green-100border-color: #D1FAE5;.divide-green-200border-color: #A7F3D0;.divide-green-300border-color: #6EE7B7;.divide-green-400border-color: #34D399;.divide-green-500border-color: #10B981;.divide-green-600border-color: #059669;.divide-green-700border-color: #047857;.divide-green-800border-color: #065F46;.divide-green-900border-color: #064E3B;.divide-blue-50border-color: #EFF6FF;.divide-blue-100border-color: #DBEAFE;.divide-blue-200border-color: #BFDBFE;.divide-blue-300border-color: #93C5FD;.divide-blue-400border-color: #60A5FA;.divide-blue-500border-color: #3B82F6;.divide-blue-600border-color: #2563EB;.divide-blue-700border-color: #1D4ED8;.divide-blue-800border-color: #1E40AF;.divide-blue-900border-color: #1E3A8A;.divide-indigo-50border-color: #EEF2FF;.divide-indigo-100border-color: #E0E7FF;.divide-indigo-200border-color: #C7D2FE;.divide-indigo-300border-color: #A5B4FC;.divide-indigo-400border-color: #818CF8;.divide-indigo-500border-color: #6366F1;.divide-indigo-600border-color: #4F46E5;.divide-indigo-700border-color: #4338CA;.divide-indigo-800border-color: #3730A3;.divide-indigo-900border-color: #312E81;.divide-purple-50border-color: #F5F3FF;.divide-purple-100border-color: #EDE9FE;.divide-purple-200border-color: #DDD6FE;.divide-purple-300border-color: #C4B5FD;.divide-purple-400border-color: #A78BFA;.divide-purple-500border-color: #8B5CF6;.divide-purple-600border-color: #7C3AED;.divide-purple-700border-color: #6D28D9;.divide-purple-800border-color: #5B21B6;.divide-purple-900border-color: #4C1D95;.divide-pink-50border-color: #FDF2F8;.divide-pink-100border-color: #FCE7F3;.divide-pink-200border-color: #FBCFE8;.divide-pink-300border-color: #F9A8D4;.divide-pink-400border-color: #F472B6;.divide-pink-500border-color: #EC4899;.divide-pink-600border-color: #DB2777;.divide-pink-700border-color: #BE185D;.divide-pink-800border-color: #9D174D;.divide-pink-900border-color: #831843;

Set the border opacity between elements.

.divide-opacity-0--divide-opacity: 0;.divide-opacity-5--divide-opacity: 0.05;.divide-opacity-10--divide-opacity: 0.1;.divide-opacity-20--divide-opacity: 0.2;.divide-opacity-25--divide-opacity: 0.25;.divide-opacity-30--divide-opacity: 0.3;.divide-opacity-40--divide-opacity: 0.4;.divide-opacity-50--divide-opacity: 0.5;.divide-opacity-60--divide-opacity: 0.6;.divide-opacity-70--divide-opacity: 0.7;.divide-opacity-75--divide-opacity: 0.75;.divide-opacity-80--divide-opacity: 0.8;.divide-opacity-90--divide-opacity: 0.9;.divide-opacity-100--divide-opacity: 1;

Set the border style between elements.

.divide-solidborder-style: solid;.divide-dashedborder-style: dashed;.divide-dottedborder-style: dotted;.divide-doubleborder-style: double;.divide-noneborder-style: none;

Set the outline style for an element using box shadows.

*box-shadow: 0 0 #000000;.ring-0box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);.ring-1box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);.ring-2box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);.ring-4box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);.ring-8box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);ringbox-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);.ring-inset--tw-ring-inset: inset;

Set the color of the outline styles.

.ring-transparent--ring-color: transparent;.ring-current--ring-color: currentColor;.ring-black--ring-color: #000000;.ring-white--ring-color: #ffffff;.ring-gray-50--ring-color: #F9FAFB;.ring-gray-100--ring-color: #F3F4F6;.ring-gray-200--ring-color: #E5E7EB;.ring-gray-300--ring-color: #D1D5DB;.ring-gray-400--ring-color: #9CA3AF;.ring-gray-500--ring-color: #6B7280;.ring-gray-600--ring-color: #4B5563;.ring-gray-700--ring-color: #374151;.ring-gray-800--ring-color: #1F2937;.ring-gray-900--ring-color: #111827;.ring-red-50--ring-color: #FEF2F2;.ring-red-100--ring-color: #FEE2E2;.ring-red-200--ring-color: #FECACA;.ring-red-300--ring-color: #FCA5A5;.ring-red-400--ring-color: #F87171;.ring-red-500--ring-color: #EF4444;.ring-red-600--ring-color: #DC2626;.ring-red-700--ring-color: #B91C1C;.ring-red-800--ring-color: #991B1B;.ring-red-900--ring-color: #7F1D1D;.ring-yellow-50--ring-color: #FFFBEB;.ring-yellow-100--ring-color: #FEF3C7;.ring-yellow-200--ring-color: #FDE68A;.ring-yellow-300--ring-color: #FCD34D;.ring-yellow-400--ring-color: #FBBF24;.ring-yellow-500--ring-color: #F59E0B;.ring-yellow-600--ring-color: #D97706;.ring-yellow-700--ring-color: #B45309;.ring-yellow-800--ring-color: #92400E;.ring-yellow-900--ring-color: #78350F;.ring-green-50--ring-color: #ECFDF5;.ring-green-100--ring-color: #D1FAE5;.ring-green-200--ring-color: #A7F3D0;.ring-green-300--ring-color: #6EE7B7;.ring-green-400--ring-color: #34D399;.ring-green-500--ring-color: #10B981;.ring-green-600--ring-color: #059669;.ring-green-700--ring-color: #047857;.ring-green-800--ring-color: #065F46;.ring-green-900--ring-color: #064E3B;.ring-blue-50--ring-color: #EFF6FF;.ring-blue-100--ring-color: #DBEAFE;.ring-blue-200--ring-color: #BFDBFE;.ring-blue-300--ring-color: #93C5FD;.ring-blue-400--ring-color: #60A5FA;.ring-blue-500--ring-color: #3B82F6;.ring-blue-600--ring-color: #2563EB;.ring-blue-700--ring-color: #1D4ED8;.ring-blue-800--ring-color: #1E40AF;.ring-blue-900--ring-color: #1E3A8A;.ring-indigo-50--ring-color: #EEF2FF;.ring-indigo-100--ring-color: #E0E7FF;.ring-indigo-200--ring-color: #C7D2FE;.ring-indigo-300--ring-color: #A5B4FC;.ring-indigo-400--ring-color: #818CF8;.ring-indigo-500--ring-color: #6366F1;.ring-indigo-600--ring-color: #4F46E5;.ring-indigo-700--ring-color: #4338CA;.ring-indigo-800--ring-color: #3730A3;.ring-indigo-900--ring-color: #312E81;.ring-purple-50--ring-color: #F5F3FF;.ring-purple-100--ring-color: #EDE9FE;.ring-purple-200--ring-color: #DDD6FE;.ring-purple-300--ring-color: #C4B5FD;.ring-purple-400--ring-color: #A78BFA;.ring-purple-500--ring-color: #8B5CF6;.ring-purple-600--ring-color: #7C3AED;.ring-purple-700--ring-color: #6D28D9;.ring-purple-800--ring-color: #5B21B6;.ring-purple-900--ring-color: #4C1D95;.ring-pink-50--ring-color: #FDF2F8;.ring-pink-100--ring-color: #FCE7F3;.ring-pink-200--ring-color: #FBCFE8;.ring-pink-300--ring-color: #F9A8D4;.ring-pink-400--ring-color: #F472B6;.ring-pink-500--ring-color: #EC4899;.ring-pink-600--ring-color: #DB2777;.ring-pink-700--ring-color: #BE185D;.ring-pink-800--ring-color: #9D174D;.ring-pink-900--ring-color: #831843;

Set the opacity of the outline style.

.ring-opacity-0--ring-opacity: 0;.ring-opacity-5--ring-opacity: 0.05;.ring-opacity-10--ring-opacity: 0.1;.ring-opacity-20--ring-opacity: 0.2;.ring-opacity-25--ring-opacity: 0.25;.ring-opacity-30--ring-opacity: 0.3;.ring-opacity-40--ring-opacity: 0.4;.ring-opacity-50--ring-opacity: 0.5;.ring-opacity-60--ring-opacity: 0.6;.ring-opacity-70--ring-opacity: 0.7;.ring-opacity-75--ring-opacity: 0.75;.ring-opacity-80--ring-opacity: 0.8;.ring-opacity-90--ring-opacity: 0.9;.ring-opacity-100--ring-opacity: 1;

Set the width of the outline style.

.ring-offset-0--ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);.ring-offset-1--ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);.ring-offset-2--ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);.ring-offset-4--ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);.ring-offset-8--ring-offset-width: 8px; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);

Set the offset for the outline style.

.ring-offset-transparent--ring-offset-color: transparent;.ring-offset-current--ring-offset-color: currentColor;.ring-offset-black--ring-offset-color: #000000;.ring-offset-white--ring-offset-color: #ffffff;.ring-offset-gray-50--ring-offset-color: #F9FAFB;.ring-offset-gray-100--ring-offset-color: #F3F4F6;.ring-offset-gray-200--ring-offset-color: #E5E7EB;.ring-offset-gray-300--ring-offset-color: #D1D5DB;.ring-offset-gray-400--ring-offset-color: #9CA3AF;.ring-offset-gray-500--ring-offset-color: #6B7280;.ring-offset-gray-600--ring-offset-color: #4B5563;.ring-offset-gray-700--ring-offset-color: #374151;.ring-offset-gray-800--ring-offset-color: #1F2937;.ring-offset-gray-900--ring-offset-color: #111827;.ring-offset-red-50--ring-offset-color: #FEF2F2;.ring-offset-red-100--ring-offset-color: #FEE2E2;.ring-offset-red-200--ring-offset-color: #FECACA;.ring-offset-red-300--ring-offset-color: #FCA5A5;.ring-offset-red-400--ring-offset-color: #F87171;.ring-offset-red-500--ring-offset-color: #EF4444;.ring-offset-red-600--ring-offset-color: #DC2626;.ring-offset-red-700--ring-offset-color: #B91C1C;.ring-offset-red-800--ring-offset-color: #991B1B;.ring-offset-red-900--ring-offset-color: #7F1D1D;.ring-offset-yellow-50--ring-offset-color: #FFFBEB;.ring-offset-yellow-100--ring-offset-color: #FEF3C7;.ring-offset-yellow-200--ring-offset-color: #FDE68A;.ring-offset-yellow-300--ring-offset-color: #FCD34D;.ring-offset-yellow-400--ring-offset-color: #FBBF24;.ring-offset-yellow-500--ring-offset-color: #F59E0B;.ring-offset-yellow-600--ring-offset-color: #D97706;.ring-offset-yellow-700--ring-offset-color: #B45309;.ring-offset-yellow-800--ring-offset-color: #92400E;.ring-offset-yellow-900--ring-offset-color: #78350F;.ring-offset-green-50--ring-offset-color: #ECFDF5;.ring-offset-green-100--ring-offset-color: #D1FAE5;.ring-offset-green-200--ring-offset-color: #A7F3D0;.ring-offset-green-300--ring-offset-color: #6EE7B7;.ring-offset-green-400--ring-offset-color: #34D399;.ring-offset-green-500--ring-offset-color: #10B981;.ring-offset-green-600--ring-offset-color: #059669;.ring-offset-green-700--ring-offset-color: #047857;.ring-offset-green-800--ring-offset-color: #065F46;.ring-offset-green-900--ring-offset-color: #064E3B;.ring-offset-blue-50--ring-offset-color: #EFF6FF;.ring-offset-blue-100--ring-offset-color: #DBEAFE;.ring-offset-blue-200--ring-offset-color: #BFDBFE;.ring-offset-blue-300--ring-offset-color: #93C5FD;.ring-offset-blue-400--ring-offset-color: #60A5FA;.ring-offset-blue-500--ring-offset-color: #3B82F6;.ring-offset-blue-600--ring-offset-color: #2563EB;.ring-offset-blue-700--ring-offset-color: #1D4ED8;.ring-offset-blue-800--ring-offset-color: #1E40AF;.ring-offset-blue-900--ring-offset-color: #1E3A8A;.ring-offset-indigo-50--ring-offset-color: #EEF2FF;.ring-offset-indigo-100--ring-offset-color: #E0E7FF;.ring-offset-indigo-200--ring-offset-color: #C7D2FE;.ring-offset-indigo-300--ring-offset-color: #A5B4FC;.ring-offset-indigo-400--ring-offset-color: #818CF8;.ring-offset-indigo-500--ring-offset-color: #6366F1;.ring-offset-indigo-600--ring-offset-color: #4F46E5;.ring-offset-indigo-700--ring-offset-color: #4338CA;.ring-offset-indigo-800--ring-offset-color: #3730A3;.ring-offset-indigo-900--ring-offset-color: #312E81;.ring-offset-purple-50--ring-offset-color: #F5F3FF;.ring-offset-purple-100--ring-offset-color: #EDE9FE;.ring-offset-purple-200--ring-offset-color: #DDD6FE;.ring-offset-purple-300--ring-offset-color: #C4B5FD;.ring-offset-purple-400--ring-offset-color: #A78BFA;.ring-offset-purple-500--ring-offset-color: #8B5CF6;.ring-offset-purple-600--ring-offset-color: #7C3AED;.ring-offset-purple-700--ring-offset-color: #6D28D9;.ring-offset-purple-800--ring-offset-color: #5B21B6;.ring-offset-purple-900--ring-offset-color: #4C1D95;.ring-offset-pink-50--ring-offset-color: #FDF2F8;.ring-offset-pink-100--ring-offset-color: #FCE7F3;.ring-offset-pink-200--ring-offset-color: #FBCFE8;.ring-offset-pink-300--ring-offset-color: #F9A8D4;.ring-offset-pink-400--ring-offset-color: #F472B6;.ring-offset-pink-500--ring-offset-color: #EC4899;.ring-offset-pink-600--ring-offset-color: #DB2777;.ring-offset-pink-700--ring-offset-color: #BE185D;.ring-offset-pink-800--ring-offset-color: #9D174D;.ring-offset-pink-900--ring-offset-color: #831843;

Set whether cells inside a table have shared or separate borders.

.border-collapseborder-collapse: collapse;.border-separateborder-collapse: separate;

Set the algorithm used to lay out table cells, rows, and columns

.table-autotable-layout: auto;.table-fixedtable-layout: fixed;

Display an element using platform-native styling, based on the operating system's theme.

.appearance-noneappearance: none;

Set the cursor style when hovering over an element.

.cursor-autocursor: auto;.cursor-defaultcursor: default;.cursor-pointercursor: pointer;.cursor-waitcursor: wait;.cursor-textcursor: text;.cursor-movecursor: move;.cursor-helpcursor: help;.cursor-not-allowedcursor: not-allowed;

Set the outline style of an element.

.outline-noneoutline: 0;.outline-whiteoutline: 2px dotted white; outline-offset: 2px;.outline-blackoutline: 2px dotted black; outline-offset: 2px;

Set under what circumstances a particular graphic element can become the target of pointer events.

.pointer-events-nonepointer-events: none;.pointer-events-autopointer-events: auto;

Set whether an element is resizable, and if so, in which directions.

.resize-noneresize: none;.resizeresize: both;.resize-yresize: vertical;.resize-xresize: horizontal;

Control whether the user can select text.

.select-noneuser-select: none;.select-textuser-select: text;.select-alluser-select: all;.select-autouser-select: auto;

Controls whether an element is visually hidden but still accessible to screen readers.

.sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); whiteSpace: nowrap; borderWidth: 0;.not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; whiteSpace: normal;

Define the line names and track sizing functions.

.grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));.grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));.grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));.grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));.grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));.grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));.grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));.grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));.grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));.grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));.grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));.grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));.grid-cols-nonegrid-template-columns: none;

Specify a grid item's size and location within a grid column.

.col-autogrid-column: auto;.col-span-1grid-column: span 1 / span 1;.col-span-2grid-column: span 2 / span 2;.col-span-3grid-column: span 3 / span 3;.col-span-4grid-column: span 4 / span 4;.col-span-5grid-column: span 5 / span 5;.col-span-6grid-column: span 6 / span 6;.col-span-7grid-column: span 7 / span 7;.col-span-8grid-column: span 8 / span 8;.col-span-9grid-column: span 9 / span 9;.col-span-10grid-column: span 10 / span 10;.col-span-11grid-column: span 11 / span 11;.col-span-12grid-column: span 12 / span 12;.col-start-1grid-column-start: 1;.col-start-2grid-column-start: 2;.col-start-3grid-column-start: 3;.col-start-4grid-column-start: 4;.col-start-5grid-column-start: 5;.col-start-6grid-column-start: 6;.col-start-7grid-column-start: 7;.col-start-8grid-column-start: 8;.col-start-9grid-column-start: 9;.col-start-10grid-column-start: 10;.col-start-11grid-column-start: 11;.col-start-12grid-column-start: 12;.col-start-13grid-column-start: 13;.col-start-autogrid-column-start: auto;.col-end-1grid-column-end: 1;.col-end-2grid-column-end: 2;.col-end-3grid-column-end: 3;.col-end-4grid-column-end: 4;.col-end-5grid-column-end: 5;.col-end-6grid-column-end: 6;.col-end-7grid-column-end: 7;.col-end-8grid-column-end: 8;.col-end-9grid-column-end: 9;.col-end-10grid-column-end: 10;.col-end-11grid-column-end: 11;.col-end-12grid-column-end: 12;.col-end-13grid-column-end: 13;.col-end-autogrid-column-end: auto;

Define the line names and track sizing functions.

.grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));.grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));.grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));.grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));.grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));.grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));.grid-rows-nonegrid-template-rows: none;

Specify a grid item’s size and location within the grid row.

.row-autogrid-row: auto;.row-span-1grid-row: span 1 / span 1;.row-span-2grid-row: span 2 / span 2;.row-span-3grid-row: span 3 / span 3;.row-span-4grid-row: span 4 / span 4;.row-span-5grid-row: span 5 / span 5;.row-span-6grid-row: span 6 / span 6;.row-start-1grid-row-start: 1;.row-start-2grid-row-start: 2;.row-start-3grid-row-start: 3;.row-start-4grid-row-start: 4;.row-start-5grid-row-start: 5;.row-start-6grid-row-start: 6;.row-start-7grid-row-start: 7;.row-start-autogrid-row-start: auto;.row-end-1grid-row-end: 1;.row-end-2grid-row-end: 2;.row-end-3grid-row-end: 3;.row-end-4grid-row-end: 4;.row-end-5grid-row-end: 5;.row-end-6grid-row-end: 6;.row-end-7grid-row-end: 7;.row-end-autogrid-row-end: auto;

Set the gaps (gutters) between rows and columns.

.gap-0gap: 0;.gap-0.5gap: 0.125rem;2px.gap-1gap: 0.25rem;4px.gap-1.5gap: 0.375rem;6px.gap-2gap: 0.5rem;8px.gap-2.5gap: 0.625rem;10px.gap-3gap: 0.75rem;12px.gap-3.5gap: 0.875rem;14px.gap-4gap: 1rem;16px.gap-5gap: 1.25rem;20px.gap-6gap: 1.5rem;24px.gap-8gap: 2rem;32px.gap-10gap: 2.5rem;40px.gap-11gap: 2.75rem;44px.gap-12gap: 3rem;48px.gap-14gap: 3.5rem;56px.gap-16gap: 4rem;64px.gap-20gap: 5rem;80px.gap-24gap: 6rem;96px.gap-28gap: 7rem;112px.gap-32gap: 8rem;128px.gap-36gap: 9rem;144px.gap-40gap: 10rem;160px.gap-44gap: 11rem;176px.gap-48gap: 12rem;192px.gap-52gap: 13rem;208px.gap-56gap: 14rem;224px.gap-64gap: 16rem;256px.gap-72gap: 18rem;288px.gap-80gap: 20rem;320px.gap-96gap: 24rem;384px.gap-pxgap: 1px;.gap-x-0column-gap: 0;.gap-x-0.5column-gap: 0.125rem;2px.gap-x-1column-gap: 0.25rem;4px.gap-x-1.5column-gap: 0.375rem;6px.gap-x-2column-gap: 0.5rem;8px.gap-x-2.5column-gap: 0.625rem;10px.gap-x-3column-gap: 0.75rem;12px.gap-x-3.5column-gap: 0.875rem;14px.gap-x-4column-gap: 1rem;16px.gap-x-5column-gap: 1.25rem;20px.gap-x-6column-gap: 1.5rem;24px.gap-x-8column-gap: 2rem;32px.gap-x-10column-gap: 2.5rem;40px.gap-x-11column-gap: 2.75rem;44px.gap-x-12column-gap: 3rem;48px.gap-x-14column-gap: 3.5rem;56px.gap-x-16column-gap: 4rem;64px.gap-x-20column-gap: 5rem;80px.gap-x-24column-gap: 6rem;96px.gap-x-28column-gap: 7rem;112px.gap-x-32column-gap: 8rem;128px.gap-x-36column-gap: 9rem;144px.gap-x-40column-gap: 10rem;160px.gap-x-44column-gap: 11rem;176px.gap-x-48column-gap: 12rem;192px.gap-x-52column-gap: 13rem;208px.gap-x-56column-gap: 14rem;224px.gap-x-64column-gap: 16rem;256px.gap-x-72column-gap: 18rem;288px.gap-x-80column-gap: 20rem;320px.gap-x-96column-gap: 24rem;384px.gap-x-pxcolumn-gap: 1px;.gap-y-0row-gap: 0;.gap-y-0.5row-gap: 0.125rem;2px.gap-y-1row-gap: 0.25rem;4px.gap-y-1.5row-gap: 0.375rem;6px.gap-y-2row-gap: 0.5rem;8px.gap-y-2.5row-gap: 0.625rem;10px.gap-y-3row-gap: 0.75rem;12px.gap-y-3.5row-gap: 0.875rem;14px.gap-y-4row-gap: 1rem;16px.gap-y-5row-gap: 1.25rem;20px.gap-y-6row-gap: 1.5rem;24px.gap-y-8row-gap: 2rem;32px.gap-y-10row-gap: 2.5rem;40px.gap-y-11row-gap: 2.75rem;44px.gap-y-12row-gap: 3rem;48px.gap-y-14row-gap: 3.5rem;56px.gap-y-16row-gap: 4rem;64px.gap-y-20row-gap: 5rem;80px.gap-y-24row-gap: 6rem;96px.gap-y-28row-gap: 7rem;112px.gap-y-32row-gap: 8rem;128px.gap-y-36row-gap: 9rem;144px.gap-y-40row-gap: 10rem;160px.gap-y-44row-gap: 11rem;176px.gap-y-48row-gap: 12rem;192px.gap-y-52row-gap: 13rem;208px.gap-y-56row-gap: 14rem;224px.gap-y-64row-gap: 16rem;256px.gap-y-72row-gap: 18rem;288px.gap-y-80row-gap: 20rem;320px.gap-y-96row-gap: 24rem;384px.gap-y-pxrow-gap: 1px;

Control how the auto-placement algorithm works.

.grid-flow-rowgrid-auto-flow: row;.grid-flow-colgrid-auto-flow: column;.grid-flow-row-densegrid-auto-flow: row dense;.grid-flow-col-densegrid-auto-flow: column dense;

Specify the size of an implicitly-created grid column.

.auto-cols-autogrid-auto-columns: auto;.auto-cols-mingrid-auto-columns: min;.auto-cols-maxgrid-auto-columns: max;.auto-cols-frgrid-auto-columns: minmax(0, 1fr);

Specify the size of an implicitly-created grid row.

.auto-rows-autogrid-auto-rows: auto;.auto-rows-mingrid-auto-rows: min;.auto-rows-maxgrid-auto-rows: max;.auto-rows-frgrid-auto-rows: minmax(0, 1fr);

Set the foreground color value of an element's text and text decorations.

.text-transparentcolor: transparent;.text-currentcolor: currentColor;.text-blackcolor: #000000;.text-whitecolor: #ffffff;.text-gray-50color: #F9FAFB;.text-gray-100color: #F3F4F6;.text-gray-200color: #E5E7EB;.text-gray-300color: #D1D5DB;.text-gray-400color: #9CA3AF;.text-gray-500color: #6B7280;.text-gray-600color: #4B5563;.text-gray-700color: #374151;.text-gray-800color: #1F2937;.text-gray-900color: #111827;.text-red-50color: #FEF2F2;.text-red-100color: #FEE2E2;.text-red-200color: #FECACA;.text-red-300color: #FCA5A5;.text-red-400color: #F87171;.text-red-500color: #EF4444;.text-red-600color: #DC2626;.text-red-700color: #B91C1C;.text-red-800color: #991B1B;.text-red-900color: #7F1D1D;.text-yellow-50color: #FFFBEB;.text-yellow-100color: #FEF3C7;.text-yellow-200color: #FDE68A;.text-yellow-300color: #FCD34D;.text-yellow-400color: #FBBF24;.text-yellow-500color: #F59E0B;.text-yellow-600color: #D97706;.text-yellow-700color: #B45309;.text-yellow-800color: #92400E;.text-yellow-900color: #78350F;.text-green-50color: #ECFDF5;.text-green-100color: #D1FAE5;.text-green-200color: #A7F3D0;.text-green-300color: #6EE7B7;.text-green-400color: #34D399;.text-green-500color: #10B981;.text-green-600color: #059669;.text-green-700color: #047857;.text-green-800color: #065F46;.text-green-900color: #064E3B;.text-blue-50color: #EFF6FF;.text-blue-100color: #DBEAFE;.text-blue-200color: #BFDBFE;.text-blue-300color: #93C5FD;.text-blue-400color: #60A5FA;.text-blue-500color: #3B82F6;.text-blue-600color: #2563EB;.text-blue-700color: #1D4ED8;.text-blue-800color: #1E40AF;.text-blue-900color: #1E3A8A;.text-indigo-50color: #EEF2FF;.text-indigo-100color: #E0E7FF;.text-indigo-200color: #C7D2FE;.text-indigo-300color: #A5B4FC;.text-indigo-400color: #818CF8;.text-indigo-500color: #6366F1;.text-indigo-600color: #4F46E5;.text-indigo-700color: #4338CA;.text-indigo-800color: #3730A3;.text-indigo-900color: #312E81;.text-purple-50color: #F5F3FF;.text-purple-100color: #EDE9FE;.text-purple-200color: #DDD6FE;.text-purple-300color: #C4B5FD;.text-purple-400color: #A78BFA;.text-purple-500color: #8B5CF6;.text-purple-600color: #7C3AED;.text-purple-700color: #6D28D9;.text-purple-800color: #5B21B6;.text-purple-900color: #4C1D95;.text-pink-50color: #FDF2F8;.text-pink-100color: #FCE7F3;.text-pink-200color: #FBCFE8;.text-pink-300color: #F9A8D4;.text-pink-400color: #F472B6;.text-pink-500color: #EC4899;.text-pink-600color: #DB2777;.text-pink-700color: #BE185D;.text-pink-800color: #9D174D;.text-pink-900color: #831843;

Set the opacity of a text element.

.text-opacity-0text-opacity: 0;.text-opacity-5text-opacity: 0.05;.text-opacity-10text-opacity: 0.1;.text-opacity-20text-opacity: 0.2;.text-opacity-25text-opacity: 0.25;.text-opacity-30text-opacity: 0.3;.text-opacity-40text-opacity: 0.4;.text-opacity-50text-opacity: 0.5;.text-opacity-60text-opacity: 0.6;.text-opacity-70text-opacity: 0.7;.text-opacity-75text-opacity: 0.75;.text-opacity-80text-opacity: 0.8;.text-opacity-90text-opacity: 0.9;.text-opacity-100text-opacity: 1;

Specify a prioritized list of one or more font family names and/or generic family names for the selected element.

.font-sansfont-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";.font-seriffont-family: Georgia, Cambria, "Times New Roman", Times, serif;.font-monofont-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Set the size of the font.

.text-xsfont-size: 0.75rem; line-height: 1rem;12px.text-smfont-size: 0.875rem; line-height: 1.25rem;14px.text-basefont-size: 1rem; line-height: 1.5rem;16px.text-lgfont-size: 1.125rem; line-height: 1.75rem;18px.text-xlfont-size: 1.25rem; line-height: 1.75rem;20px.text-2xlfont-size: 1.5rem; line-height: 2rem;24px.text-3xlfont-size: 1.875rem; line-height: 2.25rem;30px.text-4xlfont-size: 2.25rem; line-height: 2.5rem;36px.text-5xlfont-size: 3rem; line-height: 1;48px.text-6xlfont-size: 3.75rem; line-height: 1;64px.text-7xlfont-size: 4.5rem; line-height: 1;72px.text-8xlfont-size: 6rem; line-height: 1;80px.text-9xlfont-size: 8rem; line-height: 1;96px

Control the application of anti-aliasing when fonts are rendered.

.antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;.subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Set whether a font should be styled with a normal, italic, or oblique face from its font-family.

.italicfont-style: italic;.not-italicfont-style: normal;

Set the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

.font-thinfont-weight: 100;.font-extralightfont-weight: 200;.font-lightfont-weight: 300;.font-normalfont-weight: 400;.font-mediumfont-weight: 500;.font-semiboldfont-weight: 600;.font-boldfont-weight: 700;.font-extraboldfont-weight: 800;.font-blackfont-weight: 900;

Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.

.normal-numsfont-variant-numeric: normal;.ordinalfont-variant-numeric: ordinal;.slashed-zerofont-variant-numeric: slashed-zero;.lining-numsfont-variant-numeric: lining-nums;.oldstyle-numsfont-variant-numeric: oldstyle-nums;.proportional-numsfont-variant-numeric: proportional-nums;.tabular-numsfont-variant-numeric: tabular-nums;.diagonal-fractionsfont-variant-numeric: diagonal-fractions;.stacked-fractionsfont-variant-numeric: stacked-fractions;

Set the horizontal spacing behavior between text characters.

.tracking-tighterletter-spacing: -0.05em;.tracking-tightletter-spacing: -0.025em;.tracking-normalletter-spacing: 0;.tracking-wideletter-spacing: 0.025em;.tracking-widerletter-spacing: 0.05em;.tracking-widestletter-spacing: 0.1em;

Set the height of a line box.

.leading-noneline-height: 1;.leading-tightline-height: 1.25;.leading-snugline-height: 1.375;.leading-normalline-height: 1.5;.leading-relaxedline-height: 1.625;.leading-looseline-height: 2;.leading-3line-height: .75rem;12px.leading-4line-height: 1rem;16px.leading-5line-height: 1.25rem;20px.leading-6line-height: 1.5rem;24px.leading-7line-height: 1.75rem;28px.leading-8line-height: 2rem;32px.leading-9line-height: 2.25rem;36px.leading-10line-height: 2.5rem;40px

Set the marker (such as a disc, character, or custom counter style) of a list item element.

.list-nonelist-style-type: none;.list-disclist-style-type: disc;.list-decimallist-style-type: decimal;

Set the position of the marker relative to a list item.

.list-insidelist-style-position: inside;.list-outsidelist-style-position: outside;

Set the color of the placeholder using the ::placeholder pseudo element.

.placeholder-transparentcolor: transparent;.placeholder-currentcolor: currentColor;.placeholder-blackcolor: #000000;.placeholder-whitecolor: #ffffff;.placeholder-gray-50color: #F9FAFB;.placeholder-gray-100color: #F3F4F6;.placeholder-gray-200color: #E5E7EB;.placeholder-gray-300color: #D1D5DB;.placeholder-gray-400color: #9CA3AF;.placeholder-gray-500color: #6B7280;.placeholder-gray-600color: #4B5563;.placeholder-gray-700color: #374151;.placeholder-gray-800color: #1F2937;.placeholder-gray-900color: #111827;.placeholder-red-50color: #FEF2F2;.placeholder-red-100color: #FEE2E2;.placeholder-red-200color: #FECACA;.placeholder-red-300color: #FCA5A5;.placeholder-red-400color: #F87171;.placeholder-red-500color: #EF4444;.placeholder-red-600color: #DC2626;.placeholder-red-700color: #B91C1C;.placeholder-red-800color: #991B1B;.placeholder-red-900color: #7F1D1D;.placeholder-yellow-50color: #FFFBEB;.placeholder-yellow-100color: #FEF3C7;.placeholder-yellow-200color: #FDE68A;.placeholder-yellow-300color: #FCD34D;.placeholder-yellow-400color: #FBBF24;.placeholder-yellow-500color: #F59E0B;.placeholder-yellow-600color: #D97706;.placeholder-yellow-700color: #B45309;.placeholder-yellow-800color: #92400E;.placeholder-yellow-900color: #78350F;.placeholder-green-50color: #ECFDF5;.placeholder-green-100color: #D1FAE5;.placeholder-green-200color: #A7F3D0;.placeholder-green-300color: #6EE7B7;.placeholder-green-400color: #34D399;.placeholder-green-500color: #10B981;.placeholder-green-600color: #059669;.placeholder-green-700color: #047857;.placeholder-green-800color: #065F46;.placeholder-green-900color: #064E3B;.placeholder-blue-50color: #EFF6FF;.placeholder-blue-100color: #DBEAFE;.placeholder-blue-200color: #BFDBFE;.placeholder-blue-300color: #93C5FD;.placeholder-blue-400color: #60A5FA;.placeholder-blue-500color: #3B82F6;.placeholder-blue-600color: #2563EB;.placeholder-blue-700color: #1D4ED8;.placeholder-blue-800color: #1E40AF;.placeholder-blue-900color: #1E3A8A;.placeholder-indigo-50color: #EEF2FF;.placeholder-indigo-100color: #E0E7FF;.placeholder-indigo-200color: #C7D2FE;.placeholder-indigo-300color: #A5B4FC;.placeholder-indigo-400color: #818CF8;.placeholder-indigo-500color: #6366F1;.placeholder-indigo-600color: #4F46E5;.placeholder-indigo-700color: #4338CA;.placeholder-indigo-800color: #3730A3;.placeholder-indigo-900color: #312E81;.placeholder-purple-50color: #F5F3FF;.placeholder-purple-100color: #EDE9FE;.placeholder-purple-200color: #DDD6FE;.placeholder-purple-300color: #C4B5FD;.placeholder-purple-400color: #A78BFA;.placeholder-purple-500color: #8B5CF6;.placeholder-purple-600color: #7C3AED;.placeholder-purple-700color: #6D28D9;.placeholder-purple-800color: #5B21B6;.placeholder-purple-900color: #4C1D95;.placeholder-pink-50color: #FDF2F8;.placeholder-pink-100color: #FCE7F3;.placeholder-pink-200color: #FBCFE8;.placeholder-pink-300color: #F9A8D4;.placeholder-pink-400color: #F472B6;.placeholder-pink-500color: #EC4899;.placeholder-pink-600color: #DB2777;.placeholder-pink-700color: #BE185D;.placeholder-pink-800color: #9D174D;.placeholder-pink-900color: #831843;

Set the opacity of the placeholder using the ::placeholder pseudo element.

.placeholder-opacity-0placeholder-opacity: 0;.placeholder-opacity-5placeholder-opacity: 0.05;.placeholder-opacity-10placeholder-opacity: 0.1;.placeholder-opacity-20placeholder-opacity: 0.2;.placeholder-opacity-25placeholder-opacity: 0.25;.placeholder-opacity-30placeholder-opacity: 0.3;.placeholder-opacity-40placeholder-opacity: 0.4;.placeholder-opacity-50placeholder-opacity: 0.5;.placeholder-opacity-60placeholder-opacity: 0.6;.placeholder-opacity-70placeholder-opacity: 0.7;.placeholder-opacity-75placeholder-opacity: 0.75;.placeholder-opacity-80placeholder-opacity: 0.8;.placeholder-opacity-90placeholder-opacity: 0.9;.placeholder-opacity-100placeholder-opacity: 1;

Set the horizontal alignment of the content inside a block element or table-cell box.

.text-lefttext-align: left;.text-centertext-align: center;.text-righttext-align: right;.text-justifytext-align: justify;

Set the appearance of decorative lines on text.

.underlinetext-decoration: underline;.line-throughtext-decoration: line-through;.no-underlinetext-decoration: none;

Specify how to capitalize an element's text.

.uppercasetext-transform: uppercase;.lowercasetext-transform: lowercase;.capitalizetext-transform: capitalize;.normal-casetext-transform: none;

Set how hidden overflow content is signaled to users.

.truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;.overflow-ellipsistext-overflow: ellipsis;.overflow-cliptext-overflow: clip;

Set the vertical alignment of an inline, inline-block or table-cell box.

.align-baselinevertical-align: baseline;.align-topvertical-align: top;.align-middlevertical-align: middle;.align-bottomvertical-align: bottom;.align-text-topvertical-align: text-top;.align-text-bottomvertical-align: text-bottom;

Set how white space inside an element is handled.

.whitespace-normalwhite-space: normal;.whitespace-nowrapwhite-space: nowrap;.whitespace-prewhite-space: pre;.whitespace-pre-linewhite-space: pre-line;.whitespace-pre-wrapwhite-space: pre-wrap;

Set whether line breaks appear wherever the text would otherwise overflow its content box.

.break-normaloverflow-wrap: normal; word-break: normal;.break-wordsoverflow-wrap: break-word;.break-allword-break: break-all;

Add shadow effects around an element's frame.

.shadow-xsbox-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);.shadow-smbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);.shadowbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);.shadow-mdbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);.shadow-lgbox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);.shadow-xlbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);.shadow-2xlbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);.shadow-outlinebox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);.shadow-nonebox-shadow: none;

Set the opacity of an element.

.opacity-0opacity: 0;.opacity-5opacity: 0.05;.opacity-10opacity: 0.1;.opacity-20opacity: 0.2;.opacity-25opacity: 0.25;.opacity-30opacity: 0.3;.opacity-40opacity: 0.4;.opacity-50opacity: 0.5;.opacity-60opacity: 0.6;.opacity-70opacity: 0.7;.opacity-75opacity: 0.75;.opacity-80opacity: 0.8;.opacity-90opacity: 0.9;.opacity-100opacity: 1;

Set how an element's content should blend with the content of the element's parent and the element's background.

.mix-blend-normalmix-blend-mode: normal;.mix-blend-multiplymix-blend-mode: multiply;.mix-blend-screenmix-blend-mode: screen;.mix-blend-overlaymix-blend-mode: overlay;.mix-blend-darkenmix-blend-mode: darken;.mix-blend-lightenmix-blend-mode: lighten;.mix-blend-color-dodgemix-blend-mode: color-dodge;.mix-blend-color-burnmix-blend-mode: color-burn;.mix-blend-hard-lightmix-blend-mode: hard-light;.mix-blend-soft-lightmix-blend-mode: soft-light;.mix-blend-differencemix-blend-mode: difference;.mix-blend-exclusionmix-blend-mode: exclusion;.mix-blend-huemix-blend-mode: hue;.mix-blend-saturationmix-blend-mode: saturation;.mix-blend-colormix-blend-mode: color;.mix-blend-luminositymix-blend-mode: luminosity;

Set how an element's background images should blend with each other and with the element's background color.

.bg-blend-normalbackground-blend-mode: normal;.bg-blend-multiplybackground-blend-mode: multiply;.bg-blend-screenbackground-blend-mode: screen;.bg-blend-overlaybackground-blend-mode: overlay;.bg-blend-darkenbackground-blend-mode: darken;.bg-blend-lightenbackground-blend-mode: lighten;.bg-blend-color-dodgebackground-blend-mode: color-dodge;.bg-blend-color-burnbackground-blend-mode: color-burn;.bg-blend-hard-lightbackground-blend-mode: hard-light;.bg-blend-soft-lightbackground-blend-mode: soft-light;.bg-blend-differencebackground-blend-mode: difference;.bg-blend-exclusionbackground-blend-mode: exclusion;.bg-blend-huebackground-blend-mode: hue;.bg-blend-saturationbackground-blend-mode: saturation;.bg-blend-colorbackground-blend-mode: color;.bg-blend-luminositybackground-blend-mode: luminosity;

Specify the duration to wait before starting a property's transition effect when its value changes.

.delay-75transition-delay: 75ms;.delay-100transition-delay: 100ms;.delay-150transition-delay: 150ms;.delay-200transition-delay: 200ms;.delay-300transition-delay: 300ms;.delay-500transition-delay: 500ms;.delay-700transition-delay: 700ms;.delay-1000transition-delay: 1000ms;

Set the CSS properties to which a transition effect should be applied.

.transitiontransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;.transition-nonetransition-property: none;.transition-alltransition-property: all;.transition-colorstransition-property: background-color, border-color, color, fill, stroke;.transition-opacitytransition-property: opacity;.transition-shadowtransition-property: box-shadow;.transition-transformtransition-property: transform;

Set the length of time a transition animation should take to complete.

.duration-75transition-duration: 75ms;.duration-100transition-duration: 100ms;.duration-150transition-duration: 150ms;.duration-200transition-duration: 200ms;.duration-300transition-duration: 300ms;.duration-500transition-duration: 500ms;.duration-700transition-duration: 700ms;.duration-1000transition-duration: 1000ms;

Set how intermediate values are calculated for CSS properties being affected by a transition effect.

.ease-lineartransition-timing-function: linear;.ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);.ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);.ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Apply an animation between styles.

.animate-noneanimation: none;.animate-spinanimation: spin 1s linear infinite;

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }.animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }.animate-bounceanimation: 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); } }

Define the color of an SVG object.

.fill-currentfill: currentColor;

Define the stroke color of an SVG object.

.stroke-currentstroke: currentColor;

Set the stroke width of an SVG object.

.stroke-0stroke-width: 0;.stroke-1stroke-width: 1;.stroke-2stroke-width: 2;