tailwindcomponents

Cheatsheet 3.0.24

Search

Expand All

Collapse All

Back to components

Source Code On

Tailwind CSS Cheat Sheet

Find quickly all the class names and CSS properties with this interactive cheat sheet. The only
Tailwind CheatSheet you will ever need!

“Never memorize something that you can look up.” - Albert Einstein

Layout

Aspect Ratio DOCS

Utilities for controlling the aspect ratio of an element.

aspect-auto aspect-ratio: auto;

aspect-square aspect-ratio: 1 / 1;

aspect-video aspect-ratio: 16 / 9;

Container DOCS

Sets the max-width to match the min-width of the current breakpoint.

container none width: 100%

sm (640px) max-width: 640px;

 md (768px) max-width: 768px;

lg (1024px) max-width: 1024px;

xl (1280px) max-width: 1280px;

2xl (1536px) max-width: 1536px;

Columns DOCS

Utilities for controlling the number of columns within an element.

columns-1 columns: 1;

columns-2 columns: 2;

columns-3 columns: 3;

columns-4 columns: 4;

columns-5 columns: 5;

columns-6 columns: 6;

columns-7 columns: 7;

columns-8 columns: 8;

columns-9 columns: 9;

columns-10 columns: 10;

columns-11 columns: 11;

columns-12 columns: 12;

columns-auto columns: auto;

columns-3xs columns: 16rem;

columns-2xs columns: 18rem;

columns-xs columns: 20rem;

columns-sm columns: 24rem;

columns-md columns: 28rem;

columns-lg columns: 32rem;

columns-xl columns: 36rem;

columns-2xl columns: 42rem;

columns-3xl columns: 48rem;

 columns-4xl columns: 56rem;

columns-5xl columns: 64rem;

columns-6xl columns: 72rem;

columns-7xl columns: 80rem;

Break After DOCS

Utilities for controlling how a column or page should break after an element.

break-after-auto break-after: auto;

break-after-avoid break-after: avoid;

break-after-all break-after: all;

break-after-avoid-page break-after: avoid-page;

break-after-page break-after: page;

break-after-left break-after: left;

break-after-right break-after: right;

break-after-column break-after: column;

Break Before DOCS

Utilities for controlling how a column or page should break before an element.

break-before-auto break-before: auto;

break-before-avoid break-before: avoid;

break-before-all break-before: all;

break-before-avoid-page break-before: avoid-page;

break-before-page break-before: page;

break-before-left break-before: left;

break-before-right break-before: right;

break-before-column break-before: column;

Break Inside DOCS

Utilities for controlling how a column or page should break within an element.
 break-inside-auto break-inside: auto;

break-inside-avoid break-inside: avoid;

break-inside-avoid-page break-inside: avoid-page;

break-inside-column break-inside: column;

Box Decoration Break DOCS

Utilities for controlling how element fragments should be rendered across multiple
lines, columns, or pages.

decoration-slice box-decoration-break: slice;

decoration-clone box-decoration-break: clone;

Box Sizing DOCS

Sets how the total width and height of an element is calculated.

box-border box-sizing: border-box;

box-content box-sizing: content-box;

Display DOCS

Sets the display box type of an element.

block display: block;

inline-block display: inline-block;

inline display: inline;

flex display: flex;

inline-flex display: inline-flex;

table display: table;

inline-table display: inline-table;

table-caption display: table-caption;

table-cell display: table-cell;

table-column display: table-column;

table-column-group display: table-column-group;

table-footer-group display: table-footer-group;

 table-header-group display: table-header-group;

table-row-group display: table-row-group;

table-row display: table-row;

flow-root display: flow-root

grid display: grid

inline-grid display: inline-grid

contents display: contents;

list-item display: list-item;

hidden display: none;

Float DOCS

Sets an element's placement to a side of its container and allows content to wrap
around it.

float-right float: right;

float-left float: left;

float-none float: none;

Clear DOCS

Sets whether an element is moved below preceding floated elements.

clear-left clear: left;

clear-right clear: right;

clear-both clear: both;

clear-none clear: none;

Isolation DOCS

Sets whether an element is moved below preceding floated elements.

isolate isolation: isolate;

isolate-auto isolation: auto;

Object Fit DOCS

Sets how the content of a replaced element (img or video tag) should be resized.

object-contain object-fit: contain;

object-cover object-fit: cover;

object-fill object-fit: fill;

object-none object-fit: none;

object-scale-down object-fit: scale-down;

Object Position DOCS

Sets the alignment of the selected replaced element.

object-bottom object-position: bottom;

object-center object-position: center;

object-left object-position: left;

object-left-bottom object-position: left bottom;

object-left-top object-position: left top;

object-right object-position: right;

object-right-bottom object-position: right bottom;

object-right-top object-position: right top;

object-top object-position: top;

Overflow DOCS

Sets how to handle content that's too big for its container.

overflow-auto overflow: auto;

overflow-x-auto overflow-x: auto;

overflow-y-auto overflow-y: auto;

overflow-hidden overflow: hidden;

overflow-x-hidden overflow-x: hidden;

overflow-y-hidden overflow-y: hidden;

overflow-visible overflow: visible;

overflow-x-visible overflow-x: visible;

 overflow-y-visible overflow-y: visible;

overflow-scroll overflow: scroll;

overflow-x-scroll overflow-x: scroll;

overflow-y-scroll overflow-y: scroll;

scrolling-touch -webkit-overflow-scrolling: touch;

scrolling-auto -webkit-overflow-scrolling: auto;

Overscroll Behavior DOCS

Sets of utilities for controlling how the browser behaves when reaching the boundary
of a scrolling area.

overscroll-auto overscroll-behavior: auto;

overscroll-y-auto overscroll-behavior-y: auto;

overscroll-x-auto overscroll-behavior-x: auto;

overscroll-contain overscroll-behavior: contain;

overscroll-y-contain overscroll-behavior-y: contain;

overscroll-x-contain overscroll-behavior-x: contain;

overscroll-none overscroll-behavior: none;

overscroll-y-none overscroll-behavior-y: none;

overscroll-x-none overscroll-behavior-x: none;

Position DOCS

Sets an element's position.

static position: static;

fixed position: fixed;

absolute position: absolute;

relative position: relative;

sticky position: sticky;

Top / Right / Bottom / Left DOCS

Sets the placement of a positioned element.

inset-0 top: 0; right: 0; bottom: 0; left: 0;

-inset-0 top: 0; right: 0; bottom: 0; left: 0;

inset-y-0 top: 0; bottom: 0;

-inset-y-0 top: 0; bottom: 0;

inset-x-0 right: 0; left: 0;

-inset-x-0 right: 0; left: 0;

top-0 top: 0;

right-0 right: 0;

bottom-0 bottom: 0;

left-0 left: 0;

-top-0 top: 0;

-right-0 right: 0;

-bottom-0 bottom: 0;

-left-0 left: 0;

inset-0.5 top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem;

top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left:

-inset-0.5
-0.125rem;

inset-y-0.5 top: 0.125rem; bottom: 0.125rem;

-inset-y-0.5 top: -0.125rem; bottom: -0.125rem;

inset-x-0.5 right: 0.125rem; left: 0.125rem;

-inset-x-0.5 right: -0.125rem; left: -0.125rem;

top-0.5 top: 0.125rem;

right-0.5 right: 0.125rem;

bottom-0.5 bottom: 0.125rem;

left-0.5 left: 0.125rem;

-top-0.5 top: -0.125rem;

-right-0.5 right: -0.125rem;

-bottom-0.5 bottom: -0.125rem;

-left-0.5 left: -0.125rem;

inset-1 top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;

-inset-1 top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem;

inset-y-1 top: 0.25rem; bottom: 0.25rem;

-inset-y-1 top: -0.25rem; bottom: -0.25rem;

inset-x-1 right: 0.25rem; left: 0.25rem;

-inset-x-1 right: -0.25rem; left: -0.25rem;

top-1 top: 0.25rem;

right-1 right: 0.25rem;

bottom-1 bottom: 0.25rem;

left-1 left: 0.25rem;

-top-1 top: -0.25rem;

-right-1 right: -0.25rem;

-bottom-1 bottom: -0.25rem;

-left-1 left: -0.25rem;

inset-1.5 top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem;

top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left:

-inset-1.5
-0.375rem;

inset-y-1.5 top: 0.375rem; bottom: 0.375rem;

-inset-y-1.5 top: -0.375rem; bottom: -0.375rem;

inset-x-1.5 right: 0.375rem; left: 0.375rem;

-inset-x-1.5 right: -0.375rem; left: -0.375rem;

top-1.5 top: 0.375rem;

right-1.5 right: 0.375rem;

bottom-1.5 bottom: 0.375rem;

left-1.5 left: 0.375rem;

-top-1.5 top: -0.375rem;

-right-1.5 right: -0.375rem;

-bottom-1.5 bottom: -0.375rem;

-left-1.5 left: -0.375rem;

inset-2 top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem;

-inset-2 top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem;

inset-y-2 top: 0.5rem; bottom: 0.5rem;

-inset-y-2 top: -0.5rem; bottom: -0.5rem;

inset-x-2 right: 0.5rem; left: 0.5rem;

-inset-x-2 right: -0.5rem; left: -0.5rem;

top-2 top: 0.5rem;

right-2 right: 0.5rem;

bottom-2 bottom: 0.5rem;

left-2 left: 0.5rem;

-top-2 top: -0.5rem;

-right-2 right: -0.5rem;

-bottom-2 bottom: -0.5rem;

-left-2 left: -0.5rem;

inset-2.5 top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem;

top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left:

-inset-2.5
-0.625rem;

inset-y-2.5 top: 0.625rem; bottom: 0.625rem;

-inset-y-2.5 top: -0.625rem; bottom: -0.625rem;

inset-x-2.5 right: 0.625rem; left: 0.625rem;

-inset-x-2.5 right: -0.625rem; left: -0.625rem;

top-2.5 top: 0.625rem;

right-2.5 right: 0.625rem;

bottom-2.5 bottom: 0.625rem;

left-2.5 left: 0.625rem;

-top-2.5 top: -0.625rem;

-right-2.5 right: -0.625rem;

-bottom-2.5 bottom: -0.625rem;

-left-2.5 left: -0.625rem;

inset-3 top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem;

-inset-3 top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem;

inset-y-3 top: 0.75rem; bottom: 0.75rem;

-inset-y-3 top: -0.75rem; bottom: -0.75rem;

inset-x-3 right: 0.75rem; left: 0.75rem;

-inset-x-3 right: -0.75rem; left: -0.75rem;

top-3 top: 0.75rem;

right-3 right: 0.75rem;

bottom-3 bottom: 0.75rem;

left-3 left: 0.75rem;

-top-3 top: -0.75rem;

-right-3 right: -0.75rem;

-bottom-3 bottom: -0.75rem;

-left-3 left: -0.75rem;

inset-3.5 top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem;

top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left:

-inset-3.5
-0.875rem;

inset-y-3.5 top: 0.875rem; bottom: 0.875rem;

-inset-y-3.5 top: -0.875rem; bottom: -0.875rem;

inset-x-3.5 right: 0.875rem; left: 0.875rem;

-inset-x-3.5 right: -0.875rem; left: -0.875rem;

top-3.5 top: 0.875rem;

right-3.5 right: 0.875rem;

bottom-3.5 bottom: 0.875rem;

left-3.5 left: 0.875rem;

-top-3.5 top: -0.875rem;

-right-3.5 right: -0.875rem;

-bottom-3.5 bottom: -0.875rem;

-left-3.5 left: -0.875rem;

inset-4 top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;

-inset-4 top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;

inset-y-4 top: 1rem; bottom: 1rem;

-inset-y-4 top: -1rem; bottom: -1rem;

inset-x-4 right: 1rem; left: 1rem;

-inset-x-4 right: -1rem; left: -1rem;

top-4 top: 1rem;

right-4 right: 1rem;

bottom-4 bottom: 1rem;

left-4 left: 1rem;

-top-4 top: -1rem;

-right-4 right: -1rem;

-bottom-4 bottom: -1rem;

-left-4 left: -1rem;

inset-5 top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem;

-inset-5 top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem;

inset-y-5 top: 1.25rem; bottom: 1.25rem;

-inset-y-5 top: -1.25rem; bottom: -1.25rem;

inset-x-5 right: 1.25rem; left: 1.25rem;

-inset-x-5 right: -1.25rem; left: -1.25rem;

top-5 top: 1.25rem;

right-5 right: 1.25rem;

bottom-5 bottom: 1.25rem;

left-5 left: 1.25rem;

-top-5 top: -1.25rem;

-right-5 right: -1.25rem;

-bottom-5 bottom: -1.25rem;

-left-5 left: -1.25rem;

inset-6 top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem;

-inset-6 top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem;

inset-y-6 top: 1.5rem; bottom: 1.5rem;

-inset-y-6 top: -1.5rem; bottom: -1.5rem;

inset-x-6 right: 1.5rem; left: 1.5rem;

-inset-x-6 right: -1.5rem; left: -1.5rem;

top-6 top: 1.5rem;

right-6 right: 1.5rem;

bottom-6 bottom: 1.5rem;

left-6 left: 1.5rem;

-top-6 top: -1.5rem;

-right-6 right: -1.5rem;

-bottom-6 bottom: -1.5rem;

-left-6 left: -1.5rem;

inset-7 top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem;

-inset-7 top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem;

inset-y-7 top: 1.75rem; bottom: 1.75rem;

-inset-y-7 top: -1.75rem; bottom: -1.75rem;

inset-x-7 right: 1.75rem; left: 1.75rem;

-inset-x-7 right: -1.75rem; left: -1.75rem;

top-7 top: 1.75rem;

right-7 right: 1.75rem;

bottom-7 bottom: 1.75rem;

left-7 left: 1.75rem;

-top-7 top: -1.75rem;

-right-7 right: -1.75rem;

-bottom-7 bottom: -1.75rem;

-left-7 left: -1.75rem;

inset-8 top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;

-inset-8 top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;

inset-y-8 top: 2rem; bottom: 2rem;

-inset-y-8 top: -2rem; bottom: -2rem;

inset-x-8 right: 2rem; left: 2rem;

-inset-x-8 right: -2rem; left: -2rem;

top-8 top: 2rem;

right-8 right: 2rem;

bottom-8 bottom: 2rem;

left-8 left: 2rem;

-top-8 top: -2rem;

-right-8 right: -2rem;

-bottom-8 bottom: -2rem;

-left-8 left: -2rem;

inset-9 top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem;

-inset-9 top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem;

inset-y-9 top: 2.25rem; bottom: 2.25rem;

-inset-y-9 top: -2.25rem; bottom: -2.25rem;

inset-x-9 right: 2.25rem; left: 2.25rem;

-inset-x-9 right: -2.25rem; left: -2.25rem;

top-9 top: 2.25rem;

right-9 right: 2.25rem;

bottom-9 bottom: 2.25rem;

left-9 left: 2.25rem;

-top-9 top: -2.25rem;

-right-9 right: -2.25rem;

-bottom-9 bottom: -2.25rem;

-left-9 left: -2.25rem;

inset-10 top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem;

-inset-10 top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem;

inset-y-10 top: 2.5rem; bottom: 2.5rem;

-inset-y-10 top: -2.5rem; bottom: -2.5rem;

inset-x-10 right: 2.5rem; left: 2.5rem;

-inset-x-10 right: -2.5rem; left: -2.5rem;

top-10 top: 2.5rem;

right-10 right: 2.5rem;

bottom-10 bottom: 2.5rem;

left-10 left: 2.5rem;

-top-10 top: -2.5rem;

-right-10 right: -2.5rem;

-bottom-10 bottom: -2.5rem;

-left-10 left: -2.5rem;

inset-11 top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem;

-inset-11 top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem;

inset-y-11 top: 2.75rem; bottom: 2.75rem;

-inset-y-11 top: -2.75rem; bottom: -2.75rem;

inset-x-11 right: 2.75rem; left: 2.75rem;

-inset-x-11 right: -2.75rem; left: -2.75rem;

top-11 top: 2.75rem;

right-11 right: 2.75rem;

bottom-11 bottom: 2.75rem;

left-11 left: 2.75rem;

-top-11 top: -2.75rem;

-right-11 right: -2.75rem;

-bottom-11 bottom: -2.75rem;

-left-11 left: -2.75rem;

inset-12 top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;

-inset-12 top: -3rem; right: -3rem; bottom: -3rem; left: -3rem;

inset-y-12 top: 3rem; bottom: 3rem;

-inset-y-12 top: -3rem; bottom: -3rem;

inset-x-12 right: 3rem; left: 3rem;

-inset-x-12 right: -3rem; left: -3rem;

top-12 top: 3rem;

right-12 right: 3rem;

bottom-12 bottom: 3rem;

left-12 left: 3rem;

-top-12 top: -3rem;

-right-12 right: -3rem;

-bottom-12 bottom: -3rem;

-left-12 left: -3rem;

inset-14 top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem;

-inset-14 top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem;

inset-y-14 top: 3.5rem; bottom: 3.5rem;

-inset-y-14 top: -3.5rem; bottom: -3.5rem;

inset-x-14 right: 3.5rem; left: 3.5rem;

-inset-x-14 right: -3.5rem; left: -3.5rem;

top-14 top: 3.5rem;

right-14 right: 3.5rem;

bottom-14 bottom: 3.5rem;

left-14 left: 3.5rem;

-top-14 top: -3.5rem;

-right-14 right: -3.5rem;

-bottom-14 bottom: -3.5rem;

-left-14 left: -3.5rem;

inset-16 top: 4rem; right: 4rem; bottom: 4rem; left: 4rem;

-inset-16 top: -4rem; right: -4rem; bottom: -4rem; left: -4rem;

inset-y-16 top: 4rem; bottom: 4rem;

-inset-y-16 top: -4rem; bottom: -4rem;

inset-x-16 right: 4rem; left: 4rem;

-inset-x-16 right: -4rem; left: -4rem;

top-16 top: 4rem;

right-16 right: 4rem;

bottom-16 bottom: 4rem;

left-16 left: 4rem;

-top-16 top: -4rem;

-right-16 right: -4rem;

-bottom-16 bottom: -4rem;

-left-16 left: -4rem;

inset-20 top: 5rem; right: 5rem; bottom: 5rem; left: 5rem;

-inset-20 top: -5rem; right: -5rem; bottom: -5rem; left: -5rem;

inset-y-20 top: 5rem; bottom: 5rem;

-inset-y-20 top: -5rem; bottom: -5rem;

inset-x-20 right: 5rem; left: 5rem;

-inset-x-20 right: -5rem; left: -5rem;

top-20 top: 5rem;

right-20 right: 5rem;

bottom-20 bottom: 5rem;

left-20 left: 5rem;

-top-20 top: -5rem;

-right-20 right: -5rem;

-bottom-20 bottom: -5rem;

-left-20 left: -5rem;

inset-24 top: 6rem; right: 6rem; bottom: 6rem; left: 6rem;

-inset-24 top: -6rem; right: -6rem; bottom: -6rem; left: -6rem;

inset-y-24 top: 6rem; bottom: 6rem;

-inset-y-24 top: -6rem; bottom: -6rem;

inset-x-24 right: 6rem; left: 6rem;

-inset-x-24 right: -6rem; left: -6rem;

top-24 top: 6rem;

right-24 right: 6rem;

bottom-24 bottom: 6rem;

left-24 left: 6rem;

-top-24 top: -6rem;

-right-24 right: -6rem;

-bottom-24 bottom: -6rem;

-left-24 left: -6rem;

inset-28 top: 7rem; right: 7rem; bottom: 7rem; left: 7rem;

-inset-28 top: -7rem; right: -7rem; bottom: -7rem; left: -7rem;

inset-y-28 top: 7rem; bottom: 7rem;

-inset-y-28 top: -7rem; bottom: -7rem;

inset-x-28 right: 7rem; left: 7rem;

-inset-x-28 right: -7rem; left: -7rem;

top-28 top: 7rem;

right-28 right: 7rem;

bottom-28 bottom: 7rem;

left-28 left: 7rem;

-top-28 top: -7rem;

-right-28 right: -7rem;

-bottom-28 bottom: -7rem;

-left-28 left: -7rem;

inset-32 top: 8rem; right: 8rem; bottom: 8rem; left: 8rem;

-inset-32 top: -8rem; right: -8rem; bottom: -8rem; left: -8rem;

inset-y-32 top: 8rem; bottom: 8rem;

-inset-y-32 top: -8rem; bottom: -8rem;

inset-x-32 right: 8rem; left: 8rem;

-inset-x-32 right: -8rem; left: -8rem;

top-32 top: 8rem;

right-32 right: 8rem;

bottom-32 bottom: 8rem;

left-32 left: 8rem;

-top-32 top: -8rem;

-right-32 right: -8rem;

-bottom-32 bottom: -8rem;

-left-32 left: -8rem;

inset-36 top: 9rem; right: 9rem; bottom: 9rem; left: 9rem;

-inset-36 top: -9rem; right: -9rem; bottom: -9rem; left: -9rem;

inset-y-36 top: 9rem; bottom: 9rem;

-inset-y-36 top: -9rem; bottom: -9rem;

inset-x-36 right: 9rem; left: 9rem;

-inset-x-36 right: -9rem; left: -9rem;

top-36 top: 9rem;

right-36 right: 9rem;

bottom-36 bottom: 9rem;

left-36 left: 9rem;

-top-36 top: -9rem;

-right-36 right: -9rem;

-bottom-36 bottom: -9rem;

-left-36 left: -9rem;

inset-40 top: 10rem; right: 10rem; bottom: 10rem; left: 10rem;

-inset-40 top: -10rem; right: -10rem; bottom: -10rem; left: -10rem;

inset-y-40 top: 10rem; bottom: 10rem;

-inset-y-40 top: -10rem; bottom: -10rem;

inset-x-40 right: 10rem; left: 10rem;

-inset-x-40 right: -10rem; left: -10rem;

top-40 top: 10rem;

right-40 right: 10rem;

bottom-40 bottom: 10rem;

left-40 left: 10rem;

-top-40 top: -10rem;

-right-40 right: -10rem;

-bottom-40 bottom: -10rem;

-left-40 left: -10rem;

inset-44 top: 11rem; right: 11rem; bottom: 11rem; left: 11rem;

-inset-44 top: -11rem; right: -11rem; bottom: -11rem; left: -11rem;

inset-y-44 top: 11rem; bottom: 11rem;

-inset-y-44 top: -11rem; bottom: -11rem;

inset-x-44 right: 11rem; left: 11rem;

-inset-x-44 right: -11rem; left: -11rem;

top-44 top: 11rem;

right-44 right: 11rem;

bottom-44 bottom: 11rem;

left-44 left: 11rem;

-top-44 top: -11rem;

-right-44 right: -11rem;

-bottom-44 bottom: -11rem;

-left-44 left: -11rem;

inset-48 top: 12rem; right: 12rem; bottom: 12rem; left: 12rem;

-inset-48 top: -12rem; right: -12rem; bottom: -12rem; left: -12rem;

inset-y-48 top: 12rem; bottom: 12rem;

-inset-y-48 top: -12rem; bottom: -12rem;

inset-x-48 right: 12rem; left: 12rem;

-inset-x-48 right: -12rem; left: -12rem;

top-48 top: 12rem;

right-48 right: 12rem;

bottom-48 bottom: 12rem;

left-48 left: 12rem;

-top-48 top: -12rem;

-right-48 right: -12rem;

-bottom-48 bottom: -12rem;

-left-48 left: -12rem;

inset-52 top: 13rem; right: 13rem; bottom: 13rem; left: 13rem;

-inset-52 top: -13rem; right: -13rem; bottom: -13rem; left: -13rem;

inset-y-52 top: 13rem; bottom: 13rem;

-inset-y-52 top: -13rem; bottom: -13rem;

inset-x-52 right: 13rem; left: 13rem;

-inset-x-52 right: -13rem; left: -13rem;

top-52 top: 13rem;

right-52 right: 13rem;

bottom-52 bottom: 13rem;

left-52 left: 13rem;

-top-52 top: -13rem;

-right-52 right: -13rem;

-bottom-52 bottom: -13rem;

-left-52 left: -13rem;

inset-56 top: 14rem; right: 14rem; bottom: 14rem; left: 14rem;

-inset-56 top: -14rem; right: -14rem; bottom: -14rem; left: -14rem;

inset-y-56 top: 14rem; bottom: 14rem;

-inset-y-56 top: -14rem; bottom: -14rem;

inset-x-56 right: 14rem; left: 14rem;

-inset-x-56 right: -14rem; left: -14rem;

top-56 top: 14rem;

right-56 right: 14rem;

bottom-56 bottom: 14rem;

left-56 left: 14rem;

-top-56 top: -14rem;

-right-56 right: -14rem;

-bottom-56 bottom: -14rem;

-left-56 left: -14rem;

inset-60 top: 15rem; right: 15rem; bottom: 15rem; left: 15rem;

-inset-60 top: -15rem; right: -15rem; bottom: -15rem; left: -15rem;

inset-y-60 top: 15rem; bottom: 15rem;

-inset-y-60 top: -15rem; bottom: -15rem;

inset-x-60 right: 15rem; left: 15rem;

-inset-x-60 right: -15rem; left: -15rem;

top-60 top: 15rem;

right-60 right: 15rem;

bottom-60 bottom: 15rem;

left-60 left: 15rem;

-top-60 top: -15rem;

-right-60 right: -15rem;

-bottom-60 bottom: -15rem;

-left-60 left: -15rem;

inset-64 top: 16rem; right: 16rem; bottom: 16rem; left: 16rem;

-inset-64 top: -16rem; right: -16rem; bottom: -16rem; left: -16rem;

inset-y-64 top: 16rem; bottom: 16rem;

-inset-y-64 top: -16rem; bottom: -16rem;

inset-x-64 right: 16rem; left: 16rem;

-inset-x-64 right: -16rem; left: -16rem;

top-64 top: 16rem;

right-64 right: 16rem;

bottom-64 bottom: 16rem;

left-64 left: 16rem;

-top-64 top: -16rem;

-right-64 right: -16rem;

-bottom-64 bottom: -16rem;

-left-64 left: -16rem;

inset-72 top: 18rem; right: 18rem; bottom: 18rem; left: 18rem;

-inset-72 top: -18rem; right: -18rem; bottom: -18rem; left: -18rem;

inset-y-72 top: 18rem; bottom: 18rem;

-inset-y-72 top: -18rem; bottom: -18rem;

inset-x-72 right: 18rem; left: 18rem;

-inset-x-72 right: -18rem; left: -18rem;

top-72 top: 18rem;

right-72 right: 18rem;

bottom-72 bottom: 18rem;

left-72 left: 18rem;

-top-72 top: -18rem;

-right-72 right: -18rem;

-bottom-72 bottom: -18rem;

-left-72 left: -18rem;

inset-80 top: 20; right: 20; bottom: 20; left: 20;

-inset-80 top: -20; right: -20; bottom: -20; left: -20;

inset-y-80 top: 20; bottom: 20;

-inset-y-80 top: -20; bottom: -20;

inset-x-80 right: 20; left: 20;

-inset-x-80 right: -20; left: -20;

top-80 top: 20;

right-80 right: 20;

bottom-80 bottom: 20;

left-80 left: 20;

-top-80 top: -20;

-right-80 right: -20;

-bottom-80 bottom: -20;

-left-80 left: -20rem;

inset-96 top: 24rem; right: 24rem; bottom: 24rem; left: 24rem;

-inset-96 top: -24rem; right: -24rem; bottom: -24rem; left: -24rem;

inset-y-96 top: 24rem; bottom: 24rem;

-inset-y-96 top: -24rem; bottom: -24rem;

inset-x-96 right: 24rem; left: 24rem;

-inset-x-96 right: -24rem; left: -24rem;

top-96 top: 24rem;

right-96 right: 24rem;

bottom-96 bottom: 24rem;

left-96 left: 24rem;

-top-96 top: -24rem;

-right-96 right: -24rem;

-bottom-96 bottom: -24rem;

-left-96 left: -24rem;

inset-auto top: auto; right: auto; bottom: auto; left: auto;

inset-y-auto top: auto; bottom: auto;

inset-x-auto right: auto; left: auto;

top-auto top: auto;

right-auto right: auto;

bottom-auto bottom: auto;

left-auto left: auto;

inset-1/2 top: 50%; right: 50%; bottom: 50%; left: 50%;

top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left:

inset-2/3
66.666667%;

inset-1/4 top: 25%; right: 25%; bottom: 25%; left: 25%;

inset-3/4 top: 75%; right: 75%; bottom: 75%; left: 75%;

inset-full top: 100%; right: 100%; bottom: 100%; left: 100%;

-inset-1/2 top: -50%; right: -50%; bottom: -50%; left: -50%;

top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left:

-inset-2/3
-66.666667%;

-inset-1/4 top: -25%; right: -25%; bottom: -25%; left: -25%;

-inset-3/4 top: -75%; right: -75%; bottom: -75%; left: -75%;

-inset-full top: -100%; right: -100%; bottom: -100%; left: -100%;

inset-x-1/2 right: 50%; left: 50%;

inset-x-2/3 right: 66.666667%; left: 66.666667%;

inset-x-1/4 right: 25%; left: 25%;

inset-x-3/4 right: 75%; left: 75%;

inset-x-full right: 100%; left: 100%;

-inset-x-1/2 right: -50%; left: -50%;

-inset-x-2/3 right: -66.666667%; left: -66.666667%;

-inset-x-1/4 right: -25%; left: -25%;

-inset-x-3/4 right: -75%; left: -75%;

-inset-x-full right: -100%; left: -100%;

inset-y-1/2 top: 50%; bottom: 50%;

inset-y-2/3 top: 66.666667%; bottom: 66.666667%;

inset-y-1/4 top: 25%; bottom: 25%;

inset-y-3/4 top: 75%; bottom: 75%;

inset-y-full top: 100%; bottom: 100%;

-inset-y-1/2 top: -50%; bottom: -50%;

-inset-y-2/3 top: -66.666667%; bottom: -66.666667%;

-inset-y-1/4 top: -25%; bottom: -25%;

-inset-y-3/4 top: -75%; bottom: -75%;

-inset-y-full top: -100%; bottom: -100%;

top-1/2 top: 50%;

top-2/3 top: 66.666667%;

top-1/4 top: 25%;

top-3/4 top: 75%;

top-full top: 100%;

-top-1/2 top: -50%;

-top-2/3 top: -66.666667%;

-top-1/4 top: -25%;

-top-3/4 top: -75%;

-top-full top: -100%;

right-1/2 right: 50%;

right-2/3 right: 66.666667%;

right-1/4 right: 25%;

right-3/4 right: 75%;

right-full right: 100%;

-right-1/2 right: -50%;

-right-2/3 right: -66.666667%;

-right-1/4 right: -25%;

-right-3/4 right: -75%;

-right-full right: -100%;

bottom-1/2 bottom: 50%;

bottom-2/3 bottom: 66.666667%;

bottom-1/4 bottom: 25%;

bottom-3/4 bottom: 75%;

bottom-full bottom: 100%;

-bottom-1/2 bottom: -50%;

-bottom-2/3 bottom: -66.666667%;

-bottom-1/4 bottom: -25%;

-bottom-3/4 bottom: -75%;

-bottom-full bottom: -100%;

left-1/2 left: 50%;

left-2/3 left: 66.666667%;

left-1/4 left: 25%;

left-3/4 left: 75%;

left-full left: 100%;

-left-1/2 left: -50%;

-left-2/3 left: -66.666667%;

 -left-1/4 left: -25%;

-left-3/4 left: -75%;

-left-full left: -100%;

Visibility DOCS

Show or hide without affecting the layout of the document.

visible visibility: visible;

invisible visibility: hidden;

Z-index DOCS

Sets the z-order ("stack order") of a positioned element.

z-0 z-index: 0;

z-10 z-index: 10;

z-20 z-index: 20;

z-30 z-index: 30;

z-40 z-index: 40;

z-50 z-index: 50;

z-auto z-index: auto;

Spacing

Padding DOCS

Controls padding in 0.25rem increments.

p-0 padding: 0;

p-0.5 padding: 0.125rem; 2px

p-1 padding: 0.25rem; 4px

p-1.5 padding: 0.375rem; 6px

p-2 padding: 0.5rem; 8px

p-2.5 padding: 0.625rem; 10px

p-3 padding: 0.75rem; 12px

p-3.5 padding: 0.875rem; 14px

p-4 padding: 1rem; 16px

p-5 padding: 1.25rem; 20px

p-6 padding: 1.5rem; 24px

p-8 padding: 2rem; 32px

p-10 padding: 2.5rem; 40px

p-11 padding: 2.75rem; 44px

p-12 padding: 3rem; 48px

p-14 padding: 3.5rem; 56px

p-16 padding: 4rem; 64px

p-20 padding: 5rem; 80px

p-24 padding: 6rem; 96px

p-28 padding: 7rem; 112px

p-32 padding: 8rem; 128px

p-36 padding: 9rem; 144px

p-40 padding: 10rem; 160px

p-44 padding: 11rem; 176px

p-48 padding: 12rem; 192px

p-52 padding: 13rem; 208px

p-56 padding: 14rem; 224px

p-64 padding: 16rem; 256px

p-72 padding: 18rem; 288px

p-80 padding: 20rem; 320px

p-96 padding: 24rem; 384px

p-px padding: 1px;

py-0 padding-top: 0; padding-bottom: 0;

px-0 padding-left: 0; padding-right: 0;

py-0.5 padding-top: 0.125rem; padding-bottom: 0.125rem; 2px

px-0.5 padding-left: 0.125rem; padding-right: 0.125rem; 2px

py-1 padding-top: 0.25rem; padding-bottom: 0.25rem; 4px

px-1 padding-left: 0.25rem; padding-right: 0.25rem; 4px

py-1.5 padding-top: 0.375rem; padding-bottom: 0.375rem; 6px

px-1.5 padding-left: 0.375rem; padding-right: 0.375rem; 6px

py-2 padding-top: 0.5rem; padding-bottom: 0.5rem; 8px

px-2 padding-left: 0.5rem; padding-right: 0.5rem; 8px

py-2.5 padding-top: 0.625rem; padding-bottom: 0.625rem; 10px

px-2.5 padding-left: 0.625rem; padding-right: 0.625rem; 10px

py-3 padding-top: 0.75rem; padding-bottom: 0.75rem; 12px

px-3 padding-left: 0.75rem; padding-right: 0.75rem; 12px

py-3.5 padding-top: 0.875rem; padding-bottom: 0.875rem; 14px

px-3.5 padding-left: 0.875rem; padding-right: 0.875rem; 14px

py-4 padding-top: 1rem; padding-bottom: 1rem; 16px

px-4 padding-left: 1rem; padding-right: 1rem; 16px

py-5 padding-top: 1.25rem; padding-bottom: 1.25rem; 20px

px-5 padding-left: 1.25rem; padding-right: 1.25rem; 20px

py-6 padding-top: 1.5rem; padding-bottom: 1.5rem; 24px

px-6 padding-left: 1.5rem; padding-right: 1.5rem; 24px

py-7 padding-top: 1.75rem; padding-bottom: 1.75rem; 24px

px-7 padding-left: 1.75rem; padding-right: 1.75rem; 24px

py-8 padding-top: 2rem; padding-bottom: 2rem; 32px

px-8 padding-left: 2rem; padding-right: 2rem; 32px

py-9 padding-top: 2.25rem; padding-bottom: 2.25rem; 36px

px-9 padding-left: 2.25rem; padding-right: 2.25rem; 36px

py-10 padding-top: 2.5rem; padding-bottom: 2.5rem; 40px

px-10 padding-left: 2.5rem; padding-right: 2.5rem; 40px

py-11 padding-top: 2.75rem; padding-bottom: 2.75rem; 44px

px-11 padding-left: 2.75rem; padding-right: 2.75rem; 44px

py-12 padding-top: 3rem; padding-bottom: 3rem; 48px

px-12 padding-left: 3rem; padding-right: 3rem; 48px

py-14 padding-top: 3.5rem; padding-bottom: 3.5rem; 56px

px-14 padding-left: 3.5rem; padding-right: 3.5rem; 56px

py-16 padding-top: 4rem; padding-bottom: 4rem; 64px

px-16 padding-left: 4rem; padding-right: 4rem; 64px

py-20 padding-top: 5rem; padding-bottom: 5rem; 80px

px-20 padding-left: 5rem; padding-right: 5rem; 80px

py-24 padding-top: 6rem; padding-bottom: 6rem; 96px

px-24 padding-left: 6rem; padding-right: 6rem; 96px

py-28 padding-top: 7rem; padding-bottom: 7rem; 112px

px-28 padding-left: 7rem; padding-right: 7rem; 112px

py-32 padding-top: 8rem; padding-bottom: 8rem; 128px

px-32 padding-left: 8rem; padding-right: 8rem; 128px

py-36 padding-top: 9rem; padding-bottom: 9rem; 144px

px-36 padding-left: 9rem; padding-right: 9rem; 144px

py-40 padding-top: 10rem; padding-bottom: 10rem; 160px

px-40 padding-left: 10rem; padding-right: 10rem; 160px

py-44 padding-top: 11rem; padding-bottom: 11rem; 176px

px-44 padding-left: 11rem; padding-right: 11rem; 176px

py-48 padding-top: 12rem; padding-bottom: 12rem; 192px

px-48 padding-left: 12rem; padding-right: 12rem; 192px

py-52 padding-top: 13rem; padding-bottom: 13rem; 208px

px-52 padding-left: 13rem; padding-right: 13rem; 208px

py-56 padding-top: 14rem; padding-bottom: 14rem; 224px

px-56 padding-left: 14rem; padding-right: 14rem; 224px

py-60 padding-top: 15rem; padding-bottom: 15rem; 240px

px-60 padding-left: 15rem; padding-right: 15rem; 240px

py-64 padding-top: 16rem; padding-bottom: 16rem; 256px

px-64 padding-left: 16rem; padding-right: 16rem; 256px

py-70 padding-top: 18rem; padding-bottom: 18rem; 280px

px-70 padding-left: 18rem; padding-right: 18rem; 280px

py-80 padding-top: 20rem; padding-bottom: 20rem; 320px

px-80 padding-left: 20rem; padding-right: 20rem; 320px

py-96 padding-top: 24rem; padding-bottom: 24rem; 384px

px-96 padding-left: 24rem; padding-right: 24rem; 384px

py-px padding-top: 1px; padding-bottom: 1px;

px-px padding-left: 1px; padding-right: 1px;

pt-0 padding-top: 0;

pr-0 padding-right: 0;

pb-0 padding-bottom: 0;

pl-0 padding-left: 0;

pt-0.5 padding-top: 0.125rem; 2px

pr-0.5 padding-right: 0.125rem; 2px

pb-0.5 padding-bottom: 0.125rem; 2px

pl-0.5 padding-left: 0.125rem; 2px

pt-1 padding-top: 0.25rem; 4px

pr-1 padding-right: 0.25rem; 4px

pb-1 padding-bottom: 0.25rem; 4px

pl-1 padding-left: 0.25rem; 4px

pt-1.5 padding-top: 0.375rem; 6px

pr-1.5 padding-right: 0.375rem; 6px

pb-1.5 padding-bottom: 0.375rem; 6px

pl-1.5 padding-left: 0.375rem; 6px

pt-2 padding-top: 0.5rem; 8px

pr-2 padding-right: 0.5rem; 8px

pb-2 padding-bottom: 0.5rem; 8px

pl-2 padding-left: 0.5rem; 8px

pt-2.5 padding-top: 0.625rem; 10px

pr-2.5 padding-right: 0.625rem; 10px

pb-2.5 padding-bottom: 0.625rem; 10px

pl-2.5 padding-left: 0.625rem; 10px

pt-3 padding-top: 0.75rem; 12px

pr-3 padding-right: 0.75rem; 12px

pb-3 padding-bottom: 0.75rem; 12px

pl-3 padding-left: 0.75rem; 12px

pt-3.5 padding-top: 0.875rem; 14px

pr-3.5 padding-right: 0.875rem; 14px

pb-3.5 padding-bottom: 0.875rem; 14px

pl-3.5 padding-left: 0.875rem; 14px

pt-4 padding-top: 1rem; 16px

pr-4 padding-right: 1rem; 16px

pb-4 padding-bottom: 1rem; 16px

pl-4 padding-left: 1rem; 16px

pt-5 padding-top: 1.25rem; 20px

pr-5 padding-right: 1.25rem; 20px

pb-5 padding-bottom: 1.25rem; 20px

pl-5 padding-left: 1.25rem; 20px

pt-6 padding-top: 1.5rem; 24px

pr-6 padding-right: 1.5rem; 24px

pb-6 padding-bottom: 1.5rem; 24px

pl-6 padding-left: 1.5rem; 24px

pt-7 padding-top: 1.75rem; 28px

pr-7 padding-right: 1.75rem; 28px

pb-7 padding-bottom: 1.75rem; 28px

pl-7 padding-left: 1.75rem; 28px

pt-8 padding-top: 2rem; 32px

pr-8 padding-right: 2rem; 32px

pb-8 padding-bottom: 2rem; 32px

pl-8 padding-left: 2rem; 32px

pt-9 padding-top: 2.25rem; 36px

pr-9 padding-right: 2.25rem; 36px

pb-9 padding-bottom: 2.25rem; 36px

pl-9 padding-left: 2.25rem; 36px

pt-10 padding-top: 2.5rem; 40px

pr-10 padding-right: 2.5rem; 40px

pb-10 padding-bottom: 2.5rem; 40px

pl-10 padding-left: 2.5rem; 40px

pt-11 padding-top: 2.75rem; 44px

pr-11 padding-right: 2.75rem; 44px

pb-11 padding-bottom: 2.75rem; 44px

pl-11 padding-left: 2.75rem; 44px

pt-12 padding-top: 3rem; 48px

pr-12 padding-right: 3rem; 48px

pb-12 padding-bottom: 3rem; 48px

pl-12 padding-left: 3rem; 48px

pt-14 padding-top: 3.5rem; 56px

pr-14 padding-right: 3.5rem; 56px

pb-14 padding-bottom: 3.5rem; 56px

pl-14 padding-left: 3.5rem; 56px

pt-16 padding-top: 4rem; 64px

pr-16 padding-right: 4rem; 64px

pb-16 padding-bottom: 4rem; 64px

pl-16 padding-left: 4rem; 64px

pt-20 padding-top: 5rem; 80px

pr-20 padding-right: 5rem; 80px

pb-20 padding-bottom: 5rem; 80px

pl-20 padding-left: 5rem; 80px

pt-24 padding-top: 6rem; 96px

pr-24 padding-right: 6rem; 96px

pb-24 padding-bottom: 6rem; 96px

pl-24 padding-left: 6rem; 96px

pt-28 padding-top: 7rem; 112px

pr-28 padding-right: 7rem; 112px

pb-28 padding-bottom: 7rem; 112px

pl-28 padding-left: 7rem; 112px

pt-32 padding-top: 8rem; 128px

pr-32 padding-right: 8rem; 128px

pb-32 padding-bottom: 8rem; 128px

pl-32 padding-left: 8rem; 128px

pt-36 padding-top: 9rem; 144px

pr-36 padding-right: 9rem; 144px

pb-36 padding-bottom: 9rem; 144px

pl-36 padding-left: 9rem; 144px

pt-40 padding-top: 10rem; 160px

pr-40 padding-right: 10rem; 160px

pb-40 padding-bottom: 10rem; 160px

pl-40 padding-left: 10rem; 160px

pt-44 padding-top: 11rem; 176px

pr-44 padding-right: 11rem; 176px

pb-44 padding-bottom: 11rem; 176px

pl-44 padding-left: 11rem; 176px

pt-48 padding-top: 12rem; 192px

pr-48 padding-right: 12rem; 192px

pb-48 padding-bottom: 12rem; 192px

pl-48 padding-left: 12rem; 192px

pt-52 padding-top: 13rem; 208px

pr-52 padding-right: 13rem; 208px

pb-52 padding-bottom: 13rem; 208px

pl-52 padding-left: 13rem; 208px

pt-56 padding-top: 14rem; 224px

pr-56 padding-right: 14rem; 224px

pb-56 padding-bottom: 14rem; 224px

pl-56 padding-left: 14rem; 224px

pt-60 padding-top: 15rem; 240px

pr-60 padding-right: 15rem; 240px

pb-60 padding-bottom: 15rem; 240px

pl-60 padding-left: 15rem; 240px

pt-64 padding-top: 16rem; 256px

pr-64 padding-right: 16rem; 256px

pb-64 padding-bottom: 16rem; 256px

pl-64 padding-left: 16rem; 256px

pt-72 padding-top: 18rem; 288px

pr-72 padding-right: 18rem; 288px

pb-72 padding-bottom: 18rem; 288px

pl-72 padding-left: 18rem; 288px

pt-80 padding-top: 20rem; 320px

pr-80 padding-right: 20rem; 320px

pb-80 padding-bottom: 20rem; 320px

pl-80 padding-left: 20rem; 320px

pt-96 padding-top: 24rem; 384px

pr-96 padding-right: 24rem; 384px

pb-96 padding-bottom: 24rem; 384px

pl-96 padding-left: 24rem; 384px

 pt-px padding-top: 1px;

pr-px padding-right: 1px;

pb-px padding-bottom: 1px;

pl-px padding-left: 1px;

Margin DOCS

Controls margin (and negative margin) in 0.25rem increments.

m-0 margin: 0;

m-0.5 margin: 0.125rem; 2px

m-1 margin: 0.25rem; 4px

m-1.5 margin: 0.375rem; 6px

m-2 margin: 0.5rem; 8px

m-2.5 margin: 0.625rem; 10px

m-3 margin: 0.75rem; 12px

m-3.5 margin: 0.875rem; 14px

m-4 margin: 1rem; 16px

m-5 margin: 1.25rem; 20px

m-6 margin: 1.5rem; 24px

m-8 margin: 2rem; 32px

m-10 margin: 2.5rem; 40px

m-11 margin: 2.75rem; 44px

m-12 margin: 3rem; 48px

m-14 margin: 3.5rem; 56px

m-16 margin: 4rem; 64px

m-20 margin: 5rem; 80px

m-24 margin: 6rem; 96px

m-28 margin: 7rem; 112px

m-32 margin: 8rem; 128px

m-36 margin: 9rem; 144px

m-40 margin: 10rem; 160px

m-44 margin: 11rem; 176px

m-48 margin: 12rem; 192px

m-52 margin: 13rem; 208px

m-56 margin: 14rem; 224px

m-64 margin: 16rem; 256px

m-72 margin: 18rem; 288px

m-80 margin: 20rem; 320px

m-96 margin: 24rem; 384px

m-px margin: 1px;

my-0 margin-top: 0; margin-bottom: 0;

mx-0 margin-left: 0; margin-right: 0;

my-0.5 margin-top: 0.125rem; margin-bottom: 0.125rem; 2px

mx-0.5 margin-left: 0.125rem; margin-right: 0.125rem; 2px

my-1 margin-top: 0.25rem; margin-bottom: 0.25rem; 4px

mx-1 margin-left: 0.25rem; margin-right: 0.25rem; 4px

my-1.5 margin-top: 0.375rem; margin-bottom: 0.375rem; 6px

mx-1.5 margin-left: 0.375rem; margin-right: 0.375rem; 6px

my-2 margin-top: 0.5rem; margin-bottom: 0.5rem; 8px

mx-2 margin-left: 0.5rem; margin-right: 0.5rem; 8px

my-2.5 margin-top: 0.625rem; margin-bottom: 0.625rem; 10px

mx-2.5 margin-left: 0.625rem; margin-right: 0.625rem; 10px

my-3 margin-top: 0.75rem; margin-bottom: 0.75rem; 12px

mx-3 margin-left: 0.75rem; margin-right: 0.75rem; 12px

my-3.5 margin-top: 0.875rem; margin-bottom: 0.875rem; 14px

mx-3.5 margin-left: 0.875rem; margin-right: 0.875rem; 14px

my-4 margin-top: 1rem; margin-bottom: 1rem; 16px

mx-4 margin-left: 1rem; margin-right: 1rem; 16px

my-5 margin-top: 1.25rem; margin-bottom: 1.25rem; 20px

mx-5 margin-left: 1.25rem; margin-right: 1.25rem; 20px

my-6 margin-top: 1.5rem; margin-bottom: 1.5rem; 24px

mx-6 margin-left: 1.5rem; margin-right: 1.5rem; 24px

my-7 margin-top: 1.75rem; margin-bottom: 1.75rem; 24px

mx-7 margin-left: 1.75rem; margin-right: 1.75rem; 24px

my-8 margin-top: 2rem; margin-bottom: 2rem; 32px

mx-8 margin-left: 2rem; margin-right: 2rem; 32px

my-9 margin-top: 2.25rem; margin-bottom: 2.25rem; 36px

mx-9 margin-left: 2.25rem; margin-right: 2.25rem; 36px

my-10 margin-top: 2.5rem; margin-bottom: 2.5rem; 40px

mx-10 margin-left: 2.5rem; margin-right: 2.5rem; 40px

my-11 margin-top: 2.75rem; margin-bottom: 2.75rem; 44px

mx-11 margin-left: 2.75rem; margin-right: 2.75rem; 44px

my-12 margin-top: 3rem; margin-bottom: 3rem; 48px

mx-12 margin-left: 3rem; margin-right: 3rem; 48px

my-14 margin-top: 3.5rem; margin-bottom: 3.5rem; 56px

mx-14 margin-left: 3.5rem; margin-right: 3.5rem; 56px

my-16 margin-top: 4rem; margin-bottom: 4rem; 64px

mx-16 margin-left: 4rem; margin-right: 4rem; 64px

my-20 margin-top: 5rem; margin-bottom: 5rem; 80px

mx-20 margin-left: 5rem; margin-right: 5rem; 80px

my-24 margin-top: 6rem; margin-bottom: 6rem; 96px

mx-24 margin-left: 6rem; margin-right: 6rem; 96px

my-28 margin-top: 7rem; margin-bottom: 7rem; 112px

mx-28 margin-left: 7rem; margin-right: 7rem; 112px

my-32 margin-top: 8rem; margin-bottom: 8rem; 128px

mx-32 margin-left: 8rem; margin-right: 8rem; 128px

my-36 margin-top: 9rem; margin-bottom: 9rem; 144px

mx-36 margin-left: 9rem; margin-right: 9rem; 144px

my-40 margin-top: 10rem; margin-bottom: 10rem; 160px

mx-40 margin-left: 10rem; margin-right: 10rem; 160px

my-44 margin-top: 11rem; margin-bottom: 11rem; 176px

mx-44 margin-left: 11rem; margin-right: 11rem; 176px

my-48 margin-top: 12rem; margin-bottom: 12rem; 192px

mx-48 margin-left: 12rem; margin-right: 12rem; 192px

my-52 margin-top: 13rem; margin-bottom: 13rem; 208px

mx-52 margin-left: 13rem; margin-right: 13rem; 208px

my-56 margin-top: 14rem; margin-bottom: 14rem; 224px

mx-56 margin-left: 14rem; margin-right: 14rem; 224px

my-60 margin-top: 15rem; margin-bottom: 15rem; 240px

mx-60 margin-left: 15rem; margin-right: 15rem; 240px

my-64 margin-top: 16rem; margin-bottom: 16rem; 256px

mx-64 margin-left: 16rem; margin-right: 16rem; 256px

my-70 margin-top: 18rem; margin-bottom: 18rem; 280px

mx-70 margin-left: 18rem; margin-right: 18rem; 280px

my-80 margin-top: 20rem; margin-bottom: 20rem; 320px

mx-80 margin-left: 20rem; margin-right: 20rem; 320px

my-96 margin-top: 24rem; margin-bottom: 24rem; 384px

mx-96 margin-left: 24rem; margin-right: 24rem; 384px

my-px margin-top: 1px; margin-bottom: 1px;

mx-px margin-left: 1px; margin-right: 1px;

mt-0 margin-top: 0;

mr-0 margin-right: 0;

mb-0 margin-bottom: 0;

ml-0 margin-left: 0;

mt-0.5 margin-top: 0.125rem; 2px

mr-0.5 margin-right: 0.125rem; 2px

mb-0.5 margin-bottom: 0.125rem; 2px

ml-0.5 margin-left: 0.125rem; 2px

mt-1 margin-top: 0.25rem; 4px

mr-1 margin-right: 0.25rem; 4px

mb-1 margin-bottom: 0.25rem; 4px

ml-1 margin-left: 0.25rem; 4px

mt-1.5 margin-top: 0.375rem; 6px

mr-1.5 margin-right: 0.375rem; 6px

mb-1.5 margin-bottom: 0.375rem; 6px

ml-1.5 margin-left: 0.375rem; 6px

mt-2 margin-top: 0.5rem; 8px

mr-2 margin-right: 0.5rem; 8px

mb-2 margin-bottom: 0.5rem; 8px

ml-2 margin-left: 0.5rem; 8px

mt-2.5 margin-top: 0.625rem; 10px

mr-2.5 margin-right: 0.625rem; 10px

mb-2.5 margin-bottom: 0.625rem; 10px

ml-2.5 margin-left: 0.625rem; 10px

mt-3 margin-top: 0.75rem; 12px

mr-3 margin-right: 0.75rem; 12px

mb-3 margin-bottom: 0.75rem; 12px

ml-3 margin-left: 0.75rem; 12px

mt-3.5 margin-top: 0.875rem; 14px

mr-3.5 margin-right: 0.875rem; 14px

mb-3.5 margin-bottom: 0.875rem; 14px

ml-3.5 margin-left: 0.875rem; 14px

mt-4 margin-top: 1rem; 16px

mr-4 margin-right: 1rem; 16px

mb-4 margin-bottom: 1rem; 16px

ml-4 margin-left: 1rem; 16px

mt-5 margin-top: 1.25rem; 20px

mr-5 margin-right: 1.25rem; 20px

mb-5 margin-bottom: 1.25rem; 20px

ml-5 margin-left: 1.25rem; 20px

mt-6 margin-top: 1.5rem; 24px

mr-6 margin-right: 1.5rem; 24px

mb-6 margin-bottom: 1.5rem; 24px

ml-6 margin-left: 1.5rem; 24px

mt-7 margin-top: 1.75rem; 28px

mr-7 margin-right: 1.75rem; 28px

mb-7 margin-bottom: 1.75rem; 28px

ml-7 margin-left: 1.75rem; 28px

mt-8 margin-top: 2rem; 32px

mr-8 margin-right: 2rem; 32px

mb-8 margin-bottom: 2rem; 32px

ml-8 margin-left: 2rem; 32px

mt-9 margin-top: 2.25rem; 36px

mr-9 margin-right: 2.25rem; 36px

mb-9 margin-bottom: 2.25rem; 36px

ml-9 margin-left: 2.25rem; 36px

mt-10 margin-top: 2.5rem; 40px

mr-10 margin-right: 2.5rem; 40px

mb-10 margin-bottom: 2.5rem; 40px

ml-10 margin-left: 2.5rem; 40px

mt-11 margin-top: 2.75rem; 44px

mr-11 margin-right: 2.75rem; 44px

mb-11 margin-bottom: 2.75rem; 44px

ml-11 margin-left: 2.75rem; 44px

mt-12 margin-top: 3rem; 48px

mr-12 margin-right: 3rem; 48px

mb-12 margin-bottom: 3rem; 48px

ml-12 margin-left: 3rem; 48px

mt-14 margin-top: 3.5rem; 56px

mr-14 margin-right: 3.5rem; 56px

mb-14 margin-bottom: 3.5rem; 56px

ml-14 margin-left: 3.5rem; 56px

mt-16 margin-top: 4rem; 64px

mr-16 margin-right: 4rem; 64px

mb-16 margin-bottom: 4rem; 64px

ml-16 margin-left: 4rem; 64px

mt-20 margin-top: 5rem; 80px

mr-20 margin-right: 5rem; 80px

mb-20 margin-bottom: 5rem; 80px

ml-20 margin-left: 5rem; 80px

mt-24 margin-top: 6rem; 96px

mr-24 margin-right: 6rem; 96px

mb-24 margin-bottom: 6rem; 96px

ml-24 margin-left: 6rem; 96px

mt-28 margin-top: 7rem; 112px

mr-28 margin-right: 7rem; 112px

mb-28 margin-bottom: 7rem; 112px

ml-28 margin-left: 7rem; 112px

mt-32 margin-top: 8rem; 128px

mr-32 margin-right: 8rem; 128px

mb-32 margin-bottom: 8rem; 128px

ml-32 margin-left: 8rem; 128px

mt-36 margin-top: 9rem; 144px

mr-36 margin-right: 9rem; 144px

mb-36 margin-bottom: 9rem; 144px

ml-36 margin-left: 9rem; 144px

mt-40 margin-top: 10rem; 160px

mr-40 margin-right: 10rem; 160px

mb-40 margin-bottom: 10rem; 160px

ml-40 margin-left: 10rem; 160px

mt-44 margin-top: 11rem; 176px

mr-44 margin-right: 11rem; 176px

mb-44 margin-bottom: 11rem; 176px

ml-44 margin-left: 11rem; 176px

mt-48 margin-top: 12rem; 192px

mr-48 margin-right: 12rem; 192px

mb-48 margin-bottom: 12rem; 192px

ml-48 margin-left: 12rem; 192px

mt-52 margin-top: 13rem; 208px

mr-52 margin-right: 13rem; 208px

mb-52 margin-bottom: 13rem; 208px

ml-52 margin-left: 13rem; 208px

mt-56 margin-top: 14rem; 224px

mr-56 margin-right: 14rem; 224px

mb-56 margin-bottom: 14rem; 224px

ml-56 margin-left: 14rem; 224px

mt-60 margin-top: 15rem; 240px

mr-60 margin-right: 15rem; 240px

mb-60 margin-bottom: 15rem; 240px

ml-60 margin-left: 15rem; 240px

mt-64 margin-top: 16rem; 256px

mr-64 margin-right: 16rem; 256px

mb-64 margin-bottom: 16rem; 256px

ml-64 margin-left: 16rem; 256px

mt-72 margin-top: 18rem; 288px

mr-72 margin-right: 18rem; 288px

mb-72 margin-bottom: 18rem; 288px

ml-72 margin-left: 18rem; 288px

mt-80 margin-top: 20rem; 320px

mr-80 margin-right: 20rem; 320px

mb-80 margin-bottom: 20rem; 320px

ml-80 margin-left: 20rem; 320px

mt-96 margin-top: 24rem; 384px

mr-96 margin-right: 24rem; 384px

mb-96 margin-bottom: 24rem; 384px

ml-96 margin-left: 24rem; 384px

mt-px margin-top: 1px;

mr-px margin-right: 1px;

mb-px margin-bottom: 1px;

ml-px margin-left: 1px;

-m-0 margin: 0;

-m-0.5 margin: -0.125rem; 2px

-m-1 margin: -0.25rem; 4px

-m-1.5 margin: -0.375rem; 6px

-m-2 margin: -0.5rem; 8px

-m-2.5 margin: -0.625rem; 10px

-m-3 margin: -0.75rem; 12px

-m-3.5 margin: -0.875rem; 14px

-m-4 margin: -1rem; 16px

-m-5 margin: -1.25rem; 20px

-m-6 margin: -1.5rem; 24px

-m-8 margin: -2rem; 32px

-m-10 margin: -2.5rem; 40px

-m-11 margin: -2.75rem; 44px

-m-12 margin: -3rem; 48px

-m-14 margin: -3.5rem; 56px

-m-16 margin: -4rem; 64px

-m-20 margin: -5rem; 80px

-m-24 margin: -6rem; 96px

-m-28 margin: -7rem; 112px

-m-32 margin: -8rem; 128px

-m-36 margin: -9rem; 144px

-m-40 margin: -10rem; 160px

-m-44 margin: -11rem; 176px

-m-48 margin: -12rem; 192px

-m-52 margin: -13rem; 208px

-m-56 margin: -14rem; 224px

-m-64 margin: -16rem; 256px

-m-72 margin: -18rem; 288px

-m-80 margin: -20rem; 320px

-m-96 margin: -24rem; 384px

-m-px margin: -1px;

-my-0 margin-top: 0; margin-bottom: 0;

-mx-0 margin-left: 0; margin-right: 0;

-my-0.5 margin-top: -0.125rem; margin-bottom: -0.125rem; 2px

-mx-0.5 margin-left: -0.125rem; margin-right: -0.125rem; 2px

-my-1 margin-top: -0.25rem; margin-bottom: -0.25rem; 4px

-mx-1 margin-left: -0.25rem; margin-right: -0.25rem; 4px

-my-1.5 margin-top: -0.375rem; margin-bottom: -0.375rem; 6px

-mx-1.5 margin-left: -0.375rem; margin-right: -0.375rem; 6px

-my-2 margin-top: -0.5rem; margin-bottom: -0.5rem; 8px

-mx-2 margin-left: -0.5rem; margin-right: -0.5rem; 8px

-my-2.5 margin-top: -0.625rem; margin-bottom: -0.625rem; 10px

-mx-2.5 margin-left: -0.625rem; margin-right: -0.625rem; 10px

-my-3 margin-top: -0.75rem; margin-bottom: -0.75rem; 12px

-mx-3 margin-left: -0.75rem; margin-right: -0.75rem; 12px

-my-3.5 margin-top: -0.875rem; margin-bottom: -0.875rem; 14px

-mx-3.5 margin-left: -0.875rem; margin-right: -0.875rem; 14px

-my-4 margin-top: -1rem; margin-bottom: -1rem; 16px

-mx-4 margin-left: -1rem; margin-right: -1rem; 16px

-my-5 margin-top: -1.25rem; margin-bottom: -1.25rem; 20px

-mx-5 margin-left: -1.25rem; margin-right: -1.25rem; 20px

-my-6 margin-top: -1.5rem; margin-bottom: -1.5rem; 24px

-mx-6 margin-left: -1.5rem; margin-right: -1.5rem; 24px

-my-7 margin-top: 1.75rem; margin-bottom: 1.75rem; 24px

-mx-7 margin-left: 1.75rem; margin-right: 1.75rem; 24px

-my-8 margin-top: -2rem; margin-bottom: -2rem; 32px

-mx-8 margin-left: -2rem; margin-right: -2rem; 32px

-my-9 margin-top: 2.25rem; margin-bottom: 2.25rem; 36px

-mx-9 margin-left: 2.25rem; margin-right: 2.25rem; 36px

-my-10 margin-top: -2.5rem; margin-bottom: -2.5rem; 40px

-mx-10 margin-left: -2.5rem; margin-right: -2.5rem; 40px

-my-11 margin-top: -2.75rem; margin-bottom: -2.75rem; 44px

-mx-11 margin-left: -2.75rem; margin-right: -2.75rem; 44px

-my-12 margin-top: -3rem; margin-bottom: -3rem; 48px

-mx-12 margin-left: -3rem; margin-right: -3rem; 48px

-my-14 margin-top: -3.5rem; margin-bottom: -3.5rem; 56px

-mx-14 margin-left: -3.5rem; margin-right: -3.5rem; 56px

-my-16 margin-top: -4rem; margin-bottom: -4rem; 64px

-mx-16 margin-left: -4rem; margin-right: -4rem; 64px

-my-20 margin-top: -5rem; margin-bottom: -5rem; 80px

-mx-20 margin-left: -5rem; margin-right: -5rem; 80px

-my-24 margin-top: -6rem; margin-bottom: -6rem; 96px

-mx-24 margin-left: -6rem; margin-right: -6rem; 96px

-my-28 margin-top: -7rem; margin-bottom: -7rem; 112px

-mx-28 margin-left: -7rem; margin-right: -7rem; 112px

-my-32 margin-top: -8rem; margin-bottom: -8rem; 128px

-mx-32 margin-left: -8rem; margin-right: -8rem; 128px

-my-36 margin-top: -9rem; margin-bottom: -9rem; 144px

-mx-36 margin-left: -9rem; margin-right: -9rem; 144px

-my-40 margin-top: -10rem; margin-bottom: -10rem; 160px

-mx-40 margin-left: -10rem; margin-right: -10rem; 160px

-my-44 margin-top: -11rem; margin-bottom: -11rem; 176px

-mx-44 margin-left: -11rem; margin-right: -11rem; 176px

-my-48 margin-top: -12rem; margin-bottom: -12rem; 192px

-mx-48 margin-left: -12rem; margin-right: -12rem; 192px

-my-52 margin-top: -13rem; margin-bottom: -13rem; 208px

-mx-52 margin-left: -13rem; margin-right: -13rem; 208px

-my-56 margin-top: -14rem; margin-bottom: -14rem; 224px

-mx-56 margin-left: -14rem; margin-right: -14rem; 224px

-my-60 margin-top: 15rem; margin-bottom: 15rem; 240px

-mx-60 margin-left: 15rem; margin-right: 15rem; 240px

-my-64 margin-top: -16rem; margin-bottom: -16rem; 256px

-mx-64 margin-left: -16rem; margin-right: -16rem; 256px

-my-70 margin-top: -18rem; margin-bottom: -18rem; 280px

-mx-70 margin-left: -18rem; margin-right: -18rem; 280px

-my-80 margin-top: -20rem; margin-bottom: -20rem; 320px

-mx-80 margin-left: -20rem; margin-right: -20rem; 320px

-my-96 margin-top: -24rem; margin-bottom: -24rem; 384px

-mx-96 margin-left: -24rem; margin-right: -24rem; 384px

-my-px margin-top: -1px; margin-bottom: -1px;

-mx-px margin-left: -1px; margin-right: -1px;

-mt-0 margin-top: 0;

-mr-0 margin-right: 0;

-mb-0 margin-bottom: 0;

-ml-0 margin-left: 0;

-mt-0.5 margin-top: -0.125rem; 2px

-mr-0.5 margin-right: -0.125rem; 2px

-mb-0.5 margin-bottom: -0.125rem; 2px

-ml-0.5 margin-left: -0.125rem; 2px

-mt-1 margin-top: -0.25rem; 4px

-mr-1 margin-right: -0.25rem; 4px

-mb-1 margin-bottom: -0.25rem; 4px

-ml-1 margin-left: -0.25rem; 4px

-mt-1.5 margin-top: -0.375rem; 6px

-mr-1.5 margin-right: -0.375rem; 6px

-mb-1.5 margin-bottom: -0.375rem; 6px

-ml-1.5 margin-left: -0.375rem; 6px

-mt-2 margin-top: -0.5rem; 8px

-mr-2 margin-right: -0.5rem; 8px

-mb-2 margin-bottom: -0.5rem; 8px

-ml-2 margin-left: -0.5rem; 8px

-mt-2.5 margin-top: -0.625rem; 10px

-mr-2.5 margin-right: -0.625rem; 10px

-mb-2.5 margin-bottom: -0.625rem; 10px

-ml-2.5 margin-left: -0.625rem; 10px

-mt-3 margin-top: -0.75rem; 12px

-mr-3 margin-right: -0.75rem; 12px

-mb-3 margin-bottom: -0.75rem; 12px

-ml-3 margin-left: -0.75rem; 12px

-mt-3.5 margin-top: -0.875rem; 14px

-mr-3.5 margin-right: -0.875rem; 14px

-mb-3.5 margin-bottom: -0.875rem; 14px

-ml-3.5 margin-left: -0.875rem; 14px

-mt-4 margin-top: -1rem; 16px

-mr-4 margin-right: -1rem; 16px

-mb-4 margin-bottom: -1rem; 16px

-ml-4 margin-left: -1rem; 16px

-mt-5 margin-top: -1.25rem; 20px

-mr-5 margin-right: -1.25rem; 20px

-mb-5 margin-bottom: -1.25rem; 20px

-ml-5 margin-left: -1.25rem; 20px

-mt-6 margin-top: -1.5rem; 24px

-mr-6 margin-right: -1.5rem; 24px

-mb-6 margin-bottom: -1.5rem; 24px

-ml-6 margin-left: -1.5rem; 24px

-mt-7 margin-top: 1.75rem; 28px

-mr-7 margin-right: 1.75rem; 28px

-mb-7 margin-bottom: 1.75rem; 28px

-ml-7 margin-left: 1.75rem; 28px

-mt-8 margin-top: -2rem; 32px

-mr-8 margin-right: -2rem; 32px

-mb-8 margin-bottom: -2rem; 32px

-ml-8 margin-left: -2rem; 32px

-mt-9 margin-top: 2.25rem; 36px

-mr-9 margin-right: 2.25rem; 36px

-mb-9 margin-bottom: 2.25rem; 36px

-ml-9 margin-left: 2.25rem; 36px

-mt-10 margin-top: -2.5rem; 40px

-mr-10 margin-right: -2.5rem; 40px

-mb-10 margin-bottom: -2.5rem; 40px

-ml-10 margin-left: -2.5rem; 40px

-mt-11 margin-top: -2.75rem; 44px

-mr-11 margin-right: -2.75rem; 44px

-mb-11 margin-bottom: -2.75rem; 44px

-ml-11 margin-left: -2.75rem; 44px

-mt-12 margin-top: -3rem; 48px

-mr-12 margin-right: -3rem; 48px

-mb-12 margin-bottom: -3rem; 48px

-ml-12 margin-left: -3rem; 48px

-mt-14 margin-top: -3.5rem; 56px

-mr-14 margin-right: -3.5rem; 56px

-mb-14 margin-bottom: -3.5rem; 56px

-ml-14 margin-left: -3.5rem; 56px

-mt-16 margin-top: -4rem; 64px

-mr-16 margin-right: -4rem; 64px

-mb-16 margin-bottom: -4rem; 64px

-ml-16 margin-left: -4rem; 64px

-mt-20 margin-top: -5rem; 80px

-mr-20 margin-right: -5rem; 80px

-mb-20 margin-bottom: -5rem; 80px

-ml-20 margin-left: -5rem; 80px

-mt-24 margin-top: -6rem; 96px

-mr-24 margin-right: -6rem; 96px

-mb-24 margin-bottom: -6rem; 96px

-ml-24 margin-left: -6rem; 96px

-mt-28 margin-top: -7rem; 112px

-mr-28 margin-right: -7rem; 112px

-mb-28 margin-bottom: -7rem; 112px

-ml-28 margin-left: -7rem; 112px

-mt-32 margin-top: -8rem; 128px

-mr-32 margin-right: -8rem; 128px

-mb-32 margin-bottom: -8rem; 128px

-ml-32 margin-left: -8rem; 128px

-mt-36 margin-top: -9rem; 144px

-mr-36 margin-right: -9rem; 144px

-mb-36 margin-bottom: -9rem; 144px

-ml-36 margin-left: -9rem; 144px

-mt-40 margin-top: -10rem; 160px

-mr-40 margin-right: -10rem; 160px

-mb-40 margin-bottom: -10rem; 160px

-ml-40 margin-left: -10rem; 160px

-mt-44 margin-top: -11rem; 176px

-mr-44 margin-right: -11rem; 176px

-mb-44 margin-bottom: -11rem; 176px

-ml-44 margin-left: -11rem; 176px

-mt-48 margin-top: -12rem; 192px

-mr-48 margin-right: -12rem; 192px

-mb-48 margin-bottom: -12rem; 192px

-ml-48 margin-left: -12rem; 192px

-mt-52 margin-top: -13rem; 208px

-mr-52 margin-right: -13rem; 208px

-mb-52 margin-bottom: -13rem; 208px

-ml-52 margin-left: -13rem; 208px

-mt-56 margin-top: -14rem; 224px

 -mr-56 margin-right: -14rem; 224px

-mb-56 margin-bottom: -14rem; 224px

-ml-56 margin-left: -14rem; 224px

-mt-60 margin-top: 15rem; 240px

-mr-60 margin-right: 15rem; 240px

-mb-60 margin-bottom: 15rem; 240px

-ml-60 margin-left: 15rem; 240px

-mt-64 margin-top: -16rem; 256px

-mr-64 margin-right: -16rem; 256px

-mb-64 margin-bottom: -16rem; 256px

-ml-64 margin-left: -16rem; 256px

-mt-72 margin-top: -18rem; 288px

-mr-72 margin-right: -18rem; 288px

-mb-72 margin-bottom: -18rem; 288px

-ml-72 margin-left: -18rem; 288px

-mt-80 margin-top: -20rem; 320px

-mr-80 margin-right: -20rem; 320px

-mb-80 margin-bottom: -20rem; 320px

-ml-80 margin-left: -20rem; 320px

-mt-96 margin-top: -24rem; 384px

-mr-96 margin-right: -24rem; 384px

-mb-96 margin-bottom: -24rem; 384px

-ml-96 margin-left: -24rem; 384px

-mt-px margin-top: -1px;

-mr-px margin-right: -1px;

-mb-px margin-bottom: -1px;

-ml-px margin-left: -1px;

Space Between DOCS

Controls margin between child elements

space-x-0 margin-left: 0;

space-x-0.5 margin-left: 0.125rem;

space-x-1 margin-left: 0.25rem;

space-x-1.5 margin-left: 0.375rem;

space-x-2 margin-left: 0.5rem;

space-x-2.5 margin-left: 0.625rem;

space-x-3 margin-left: 0.75rem;

space-x-3 margin-left: 0.875rem;

space-x-4 margin-left: 1rem;

space-x-5 margin-left: 1.25rem;

space-x-6 margin-left: 1.5rem;

space-x-7 margin-left: 1.75rem;

space-x-8 margin-left: 2rem;

space-x-9 margin-left: 2.25rem;

space-x-10 margin-left: 2.5rem;

space-x-11 margin-left: 2.75rem;

space-x-12 margin-left: 3rem;

space-x-14 margin-left: 3.5rem;

space-x-16 margin-left: 4rem;

space-x-20 margin-left: 5rem;

space-x-24 margin-left: 6rem;

space-x-28 margin-left: 7rem;

space-x-32 margin-left: 8rem;

space-x-36 margin-left: 9rem;

space-x-40 margin-left: 10rem;

space-x-44 margin-left: 11rem;

space-x-48 margin-left: 12rem;

space-x-52 margin-left: 13rem;

space-x-56 margin-left: 14rem;

space-x-60 margin-left: 15rem;

space-x-64 margin-left: 16rem;

space-x-72 margin-left: 18rem;

space-x-80 margin-left: 20rem;

space-x-96 margin-left: 24rem;

space-x-px margin-left: 1px;

-space-x-0 margin-left: 0;

-space-x-0.5 margin-left: -0.125rem;

-space-x-1 margin-left: -0.25rem;

-space-x-1.5 margin-left: -0.375rem;

-space-x-2 margin-left: -0.5rem;

-space-x-2.5 margin-left: -0.625rem;

-space-x-3 margin-left: -0.75rem;

-space-x-3 margin-left: -0.875rem;

-space-x-4 margin-left: -1rem;

-space-x-5 margin-left: -1.25rem;

-space-x-6 margin-left: -1.5rem;

-space-x-7 margin-left: -1.75rem;

-space-x-8 margin-left: -2rem;

-space-x-9 margin-left: -2.25rem;

-space-x-10 margin-left: -2.5rem;

-space-x-11 margin-left: -2.75rem;

-space-x-12 margin-left: -3rem;

-space-x-14 margin-left: -3.5rem;

-space-x-16 margin-left: -4rem;

-space-x-20 margin-left: -5rem;

-space-x-24 margin-left: -6rem;

-space-x-28 margin-left: -7rem;

-space-x-32 margin-left: -8rem;

-space-x-36 margin-left: -9rem;

-space-x-40 margin-left: -10rem;

-space-x-44 margin-left: -11rem;

-space-x-48 margin-left: -12rem;

-space-x-52 margin-left: -13rem;

-space-x-56 margin-left: -14rem;

-space-x-60 margin-left: -15rem;

-space-x-64 margin-left: -16rem;

-space-x-72 margin-left: -18rem;

-space-x-80 margin-left: -20rem;

-space-x-96 margin-left: -24rem;

-space-x-px margin-left: -1px;

space-y-0 margin-top: 0;

space-y-0.5 margin-top: 0.125rem;

space-y-1 margin-top: 0.25rem;

space-y-1.5 margin-top: 0.375rem;

space-y-2 margin-top: 0.5rem;

space-y-2.5 margin-top: 0.625rem;

space-y-3 margin-top: 0.75rem;

space-y-3 margin-top: 0.875rem;

space-y-4 margin-top: 1rem;

space-y-5 margin-top: 1.25rem;

space-y-6 margin-top: 1.5rem;

space-y-7 margin-top: 1.75rem;

space-y-8 margin-top: 2rem;

space-y-9 margin-top: 2.25rem;

space-y-10 margin-top: 2.5rem;

space-y-11 margin-top: 2.75rem;

space-y-12 margin-top: 3rem;

space-y-14 margin-top: 3.5rem;

space-y-16 margin-top: 4rem;

space-y-20 margin-top: 5rem;

space-y-24 margin-top: 6rem;

space-y-28 margin-top: 7rem;

space-y-32 margin-top: 8rem;

space-y-36 margin-top: 9rem;

space-y-40 margin-top: 10rem;

space-y-44 margin-top: 11rem;

space-y-48 margin-top: 12rem;

space-y-52 margin-top: 13rem;

space-y-56 margin-top: 14rem;

space-y-60 margin-top: 15rem;

space-y-64 margin-top: 16rem;

space-y-72 margin-top: 18rem;

space-y-80 margin-top: 20rem;

space-y-96 margin-top: 24rem;

space-y-px margin-top: 1px;

-space-y-0 margin-top: 0;

-space-y-0.5 margin-top: -0.125rem;

-space-y-1 margin-top: -0.25rem;

-space-y-1.5 margin-top: -0.375rem;

-space-y-2 margin-top: -0.5rem;

-space-y-2.5 margin-top: -0.625rem;

-space-y-3 margin-top: -0.75rem;

-space-y-3 margin-top: -0.875rem;

-space-y-4 margin-top: -1rem;

-space-y-5 margin-top: -1.25rem;

-space-y-6 margin-top: -1.5rem;

-space-y-7 margin-top: -1.75rem;

-space-y-8 margin-top: -2rem;

-space-y-9 margin-top: -2.25rem;

-space-y-10 margin-top: -2.5rem;

-space-y-11 margin-top: -2.75rem;

-space-y-12 margin-top: -3rem;

-space-y-14 margin-top: -3.5rem;

-space-y-16 margin-top: -4rem;

-space-y-20 margin-top: -5rem;

-space-y-24 margin-top: -6rem;

-space-y-28 margin-top: -7rem;

-space-y-32 margin-top: -8rem;

-space-y-36 margin-top: -9rem;

-space-y-40 margin-top: -10rem;

-space-y-44 margin-top: -11rem;

-space-y-48 margin-top: -12rem;

-space-y-52 margin-top: -13rem;

-space-y-56 margin-top: -14rem;

-space-y-60 margin-top: -15rem;

-space-y-64 margin-top: -16rem;

-space-y-72 margin-top: -18rem;

-space-y-80 margin-top: -20rem;

-space-y-96 margin-top: -24rem;

-space-y-px margin-top: -1px;

space-x-reverse --space-x-reverse: 1

space-y-reverse --space-y-reverse: 1

Flexbox & Grid

Flex basis DOCS

Utilities for controlling the initial size of flex items.

basis-0 flex-basis: 0px;

basis-0.5 flex-basis: 0.125rem; 2px

basis-1 flex-basis: 0.25rem; 4px

basis-1.5 flex-basis: 0.375rem; 6px

basis-2 flex-basis: 0.5rem; 8px

basis-2.5 flex-basis: 0.625rem; 10px

basis-3 flex-basis: 0.75rem; 12px

basis-3.5 flex-basis: 0.875rem; 14px

basis-4 flex-basis: 1rem; 16px

basis-5 flex-basis: 1.25rem; 20px

basis-6 flex-basis: 1.5rem; 24px

basis-7 flex-basis: 1.75rem; 28px

basis-8 flex-basis: 2rem; 32px

basis-9 flex-basis: 2.25rem; 36px

basis-10 flex-basis: 2.5rem; 40px

basis-11 flex-basis: 2.75rem; 44px

basis-12 flex-basis: 3rem; 48px

basis-14 flex-basis: 3.5rem; 56px

basis-16 flex-basis: 4rem; 64px

basis-20 flex-basis: 5rem; 80px

basis-24 flex-basis: 6rem; 96px

basis-28 flex-basis: 7rem; 112px

basis-32 flex-basis: 8rem; 128px

basis-36 flex-basis: 9rem; 144px

basis-40 flex-basis: 10rem; 160px

basis-44 flex-basis: 11rem; 176px

basis-48 flex-basis: 12rem; 192px

basis-52 flex-basis: 13rem; 208px

basis-56 flex-basis: 14rem; 224px

basis-60 flex-basis: 15rem; 240px

basis-64 flex-basis: 16rem; 256px

basis-72 flex-basis: 18rem; 288px

basis-80 flex-basis: 20rem; 320px

basis-96 flex-basis: 24rem; 384px

basis-auto flex-basis: auto;

basis-px flex-basis: 1px;

basis-1/2 flex-basis: 50%;

basis-1/3 flex-basis: 33.333333%;

basis-2/3 flex-basis: 66.666667%;

basis-1/4 flex-basis: 25%;

basis-2/4 flex-basis: 50%;

basis-3/4 flex-basis: 75%;

basis-1/5 flex-basis: 20%;

basis-2/5 flex-basis: 40%;

basis-3/5 flex-basis: 60%;

basis-4/5 flex-basis: 80%;

basis-1/6 flex-basis: 16.666667%;

basis-2/6 flex-basis: 33.333333%;

basis-3/6 flex-basis: 50%;

basis-4/6 flex-basis: 66.666667%;

basis-5/6 flex-basis: 83.333333%;

basis-1/12 flex-basis: 8.333333%;

basis-2/12 flex-basis: 16.666667%;

basis-3/12 flex-basis: 25%;

basis-4/12 flex-basis: 33.333333%;

basis-5/12 flex-basis: 41.666667%;

 basis-6/12 flex-basis: 50%;

basis-7/12 flex-basis: 58.333333%;

basis-8/12 flex-basis: 66.666667%;

basis-9/12 flex-basis: 75%;

basis-10/12 flex-basis: 83.333333%;

basis-11/12 flex-basis: 91.666667%;

basis-full flex-basis: 100%;

Flex Direction DOCS

Sets direction of flex items.

flex-row flex-direction: row;

flex-row-reverse flex-direction: row-reverse;

flex-col flex-direction: column;

flex-col-reverse flex-direction: column-reverse;

Flex Wrap DOCS

Creates how flex items wrap.

flex-nowrap flex-wrap: nowrap;

flex-wrap flex-wrap: wrap;

flex-wrap-reverse flex-wrap: wrap-reverse;

Flex DOCS

Controls how flex items grow and shrink.

flex-1 flex: 1 1 0%;

flex-auto flex: 1 1 auto;

flex-initial flex: 0 1 auto;

flex-none flex: none;

Flex Grow DOCS

Controls how flex items grow.

flex-grow flex-grow: 1;

grow-0 flex-grow: 0;

Flex Shrink DOCS

Controls how flex items shrink.

shrink shrink: 1;

shrink-0 shrink: 0;

Order DOCS

Controls how flex items are ordered.

order-first order: -9999;

order-last order: 9999;

order-none order: 0;

order-1 order: 1;

order-2 order: 2;

order-3 order: 3;

order-4 order: 4;

order-5 order: 5;

order-6 order: 6;

order-7 order: 7;

order-8 order: 8;

order-9 order: 9;

order-10 order: 10;

order-11 order: 11;

order-12 order: 12;

Grid Template Columns DOCS

Defines columns for grid layout.

 grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));

grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));

grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));

grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));

grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));

grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));

grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));

grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));

grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));

grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));

grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));

grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));

grid-cols-none grid-template-columns: none;

Grid Column, start/end DOCS

Sets a grid item size and location within the grid column.

col-auto grid-column: auto;

col-span-1 grid-column: span 1 / span 1;

col-span-2 grid-column: span 2 / span 2;

col-span-3 grid-column: span 3 / span 3;

col-span-4 grid-column: span 4 / span 4;

col-span-5 grid-column: span 5 / span 5;

col-span-6 grid-column: span 6 / span 6;

col-span-7 grid-column: span 7 / span 7;

col-span-8 grid-column: span 8 / span 8;

col-span-9 grid-column: span 9 / span 9;

col-span-10 grid-column: span 10 / span 10;

col-span-11 grid-column: span 11 / span 11;

col-span-12 grid-column: span 12 / span 12;

col-start-1 grid-column-start: 1;

col-start-2 grid-column-start: 2;

col-start-3 grid-column-start: 3;

col-start-4 grid-column-start: 4;

col-start-5 grid-column-start: 5;

col-start-6 grid-column-start: 6;

col-start-7 grid-column-start: 7;

col-start-8 grid-column-start: 8;

col-start-9 grid-column-start: 9;

col-start-10 grid-column-start: 10;

col-start-11 grid-column-start: 11;

col-start-12 grid-column-start: 12;

col-start-13 grid-column-start: 13;

col-start-auto grid-column-start: auto;

col-end-1 grid-column-end: 1;

col-end-2 grid-column-end: 2;

col-end-3 grid-column-end: 3;

col-end-4 grid-column-end: 4;

col-end-5 grid-column-end: 5;

col-end-6 grid-column-end: 6;

col-end-7 grid-column-end: 7;

col-end-8 grid-column-end: 8;

col-end-9 grid-column-end: 9;

col-end-10 grid-column-end: 10;

col-end-11 grid-column-end: 11;

col-end-12 grid-column-end: 12;

col-end-13 grid-column-end: 13;

col-end-auto grid-column-end: auto;

Grid Template Rows DOCS

Defines rows for grid layout.

grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));

grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));

grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));

grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));

grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));

grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));

grid-rows-none grid-template-rows: none;

Grid Row, start/end DOCS

Sets a grid item size and location within the grid row.

row-auto grid-row: auto;

row-span-1 grid-row: span 1 / span 1;

row-span-2 grid-row: span 2 / span 2;

row-span-3 grid-row: span 3 / span 3;

row-span-4 grid-row: span 4 / span 4;

row-span-5 grid-row: span 5 / span 5;

row-span-6 grid-row: span 6 / span 6;

row-start-1 grid-row-start: 1;

row-start-2 grid-row-start: 2;

row-start-3 grid-row-start: 3;

row-start-4 grid-row-start: 4;

row-start-5 grid-row-start: 5;

row-start-6 grid-row-start: 6;

row-start-7 grid-row-start: 7;

row-start-auto grid-row-start: auto;

row-end-1 grid-row-end: 1;

row-end-2 grid-row-end: 2;
 row-end-3 grid-row-end: 3;

row-end-4 grid-row-end: 4;

row-end-5 grid-row-end: 5;

row-end-6 grid-row-end: 6;

row-end-7 grid-row-end: 7;

row-end-auto grid-row-end: auto;

Grid Auto Flow DOCS

Controls the auto placement of grid elements.

grid-flow-row grid-auto-flow: row;

grid-flow-col grid-auto-flow: column;

grid-flow-row-dense grid-auto-flow: row dense;

grid-flow-col-dense grid-auto-flow: column dense;

Grid Auto Columns DOCS

Utilities for controlling the size of implicitly-created grid columns.

auto-cols-auto grid-auto-columns: auto;

auto-cols-min grid-auto-columns: min;

auto-cols-max grid-auto-columns: max;

auto-cols-fr grid-auto-columns: minmax(0, 1fr);

Grid Auto Rows DOCS

Utilities for controlling the size of implicitly-created grid rows.

auto-rows-auto grid-auto-rows: auto;

auto-rows-min grid-auto-rows: min;

auto-rows-max grid-auto-rows: max;

auto-rows-fr grid-auto-rows: minmax(0, 1fr);

Gap DOCS
Sets the gaps (gutters) between rows and columns.

gap-0 gap: 0;

gap-0.5 gap: 0.125rem; 2px

gap-1 gap: 0.25rem; 4px

gap-1.5 gap: 0.375rem; 6px

gap-2 gap: 0.5rem; 8px

gap-2.5 gap: 0.625rem; 10px

gap-3 gap: 0.75rem; 12px

gap-3.5 gap: 0.875rem; 14px

gap-4 gap: 1rem; 16px

gap-5 gap: 1.25rem; 20px

gap-6 gap: 1.5rem; 24px

gap-8 gap: 2rem; 32px

gap-10 gap: 2.5rem; 40px

gap-11 gap: 2.75rem; 44px

gap-12 gap: 3rem; 48px

gap-14 gap: 3.5rem; 56px

gap-16 gap: 4rem; 64px

gap-20 gap: 5rem; 80px

gap-24 gap: 6rem; 96px

gap-28 gap: 7rem; 112px

gap-32 gap: 8rem; 128px

gap-36 gap: 9rem; 144px

gap-40 gap: 10rem; 160px

gap-44 gap: 11rem; 176px

gap-48 gap: 12rem; 192px

gap-52 gap: 13rem; 208px

gap-56 gap: 14rem; 224px

gap-64 gap: 16rem; 256px

gap-72 gap: 18rem; 288px

gap-80 gap: 20rem; 320px

gap-96 gap: 24rem; 384px

gap-px gap: 1px;

gap-x-0 column-gap: 0;

gap-x-0.5 column-gap: 0.125rem; 2px

gap-x-1 column-gap: 0.25rem; 4px

gap-x-1.5 column-gap: 0.375rem; 6px

gap-x-2 column-gap: 0.5rem; 8px

gap-x-2.5 column-gap: 0.625rem; 10px

gap-x-3 column-gap: 0.75rem; 12px

gap-x-3.5 column-gap: 0.875rem; 14px

gap-x-4 column-gap: 1rem; 16px

gap-x-5 column-gap: 1.25rem; 20px

gap-x-6 column-gap: 1.5rem; 24px

gap-x-8 column-gap: 2rem; 32px

gap-x-10 column-gap: 2.5rem; 40px

gap-x-11 column-gap: 2.75rem; 44px

gap-x-12 column-gap: 3rem; 48px

gap-x-14 column-gap: 3.5rem; 56px

gap-x-16 column-gap: 4rem; 64px

gap-x-20 column-gap: 5rem; 80px

gap-x-24 column-gap: 6rem; 96px

gap-x-28 column-gap: 7rem; 112px

gap-x-32 column-gap: 8rem; 128px

gap-x-36 column-gap: 9rem; 144px

gap-x-40 column-gap: 10rem; 160px

gap-x-44 column-gap: 11rem; 176px

gap-x-48 column-gap: 12rem; 192px

gap-x-52 column-gap: 13rem; 208px

gap-x-56 column-gap: 14rem; 224px

gap-x-64 column-gap: 16rem; 256px

gap-x-72 column-gap: 18rem; 288px

gap-x-80 column-gap: 20rem; 320px

gap-x-96 column-gap: 24rem; 384px

gap-x-px column-gap: 1px;

gap-y-0 row-gap: 0;

gap-y-0.5 row-gap: 0.125rem; 2px

gap-y-1 row-gap: 0.25rem; 4px

gap-y-1.5 row-gap: 0.375rem; 6px

gap-y-2 row-gap: 0.5rem; 8px

gap-y-2.5 row-gap: 0.625rem; 10px

gap-y-3 row-gap: 0.75rem; 12px

gap-y-3.5 row-gap: 0.875rem; 14px

gap-y-4 row-gap: 1rem; 16px

gap-y-5 row-gap: 1.25rem; 20px

gap-y-6 row-gap: 1.5rem; 24px

gap-y-8 row-gap: 2rem; 32px

gap-y-10 row-gap: 2.5rem; 40px

gap-y-11 row-gap: 2.75rem; 44px

gap-y-12 row-gap: 3rem; 48px

gap-y-14 row-gap: 3.5rem; 56px

gap-y-16 row-gap: 4rem; 64px

gap-y-20 row-gap: 5rem; 80px

gap-y-24 row-gap: 6rem; 96px

gap-y-28 row-gap: 7rem; 112px

gap-y-32 row-gap: 8rem; 128px

gap-y-36 row-gap: 9rem; 144px

 gap-y-40 row-gap: 10rem; 160px

gap-y-44 row-gap: 11rem; 176px

gap-y-48 row-gap: 12rem; 192px

gap-y-52 row-gap: 13rem; 208px

gap-y-56 row-gap: 14rem; 224px

gap-y-64 row-gap: 16rem; 256px

gap-y-72 row-gap: 18rem; 288px

gap-y-80 row-gap: 20rem; 320px

gap-y-96 row-gap: 24rem; 384px

gap-y-px row-gap: 1px;

Justify Content DOCS

Utilities for controlling how flex and grid items are positioned along a container's main
axis.

justify-start justify-content: flex-start;

justify-center justify-content: center;

justify-end justify-content: flex-end;

justify-between justify-content: space-between;

justify-around justify-content: space-around;

justify-evenly justify-content: space-evenly;

Justify Items DOCS

Utilities for controlling how grid items are aligned along their inline axis.

justify-items-stretch justify-items: stretch;

justify-items-start justify-items: start;

justify-items-center justify-items: center;

justify-items-end justify-items: end;

Justify Self DOCS

Utilities for controlling how an individual grid item is aligned along its inline axis.
 justify-self-stretch justify-self: stretch;

justify-self-start justify-self: start;

justify-self-center justify-self: center;

justify-self-end justify-self: end;

justify-self-auto justify-self: auto;

Align Content DOCS

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

content-start align-content: flex-start;

content-center align-content: center;

content-end align-content: flex-end;

content-between align-content: space-between;

content-around align-content: space-around;

content-evenly align-content: space-evenly;

Align Items DOCS

Sets flex items position along a contrainer's cross axis.

items-stretch align-items: stretch;

items-start align-items: flex-start;

items-center align-items: center;

items-end align-items: flex-end;

items-baseline align-items: baseline;

Align Self DOCS

Controls how an individual flex item is positioned along container's cross axis.

self-auto align-self: auto;

self-start align-self: flex-start;

self-center align-self: center;

self-end align-self: flex-end;

 self-stretch align-self: stretch;

self-baseline align-self: baseline;

Place Content DOCS

Utilities for controlling how content is justified and aligned at the same time.

place-content-start place-content: start;

place-content-center place-content: center;

place-content-end place-content: end;

place-content-between place-content: space-between;

place-content-around place-content: space-around;

place-content-evenly place-content: space-evenly;

place-content-stretch place-content: space-stretch;

Place Items DOCS

Utilities for controlling how items are justified and aligned at the same time.

place-items-stretch place-items: stretch;

place-items-start place-items: start;

place-items-center place-items: center;

place-items-end place-items: end;

Place Self DOCS

Utilities for controlling how an individual item is justified and aligned at the same time.

place-self-auto place-self: auto;

place-self-start place-self: start;

place-self-center place-self: center;

place-self-end place-self: end;

place-self-stretch place-self: stretch;

Borders
Border Radius DOCS

Sets border radius.

rounded-none border-radius: 0;

rounded-sm border-radius: 0.125rem; 2px

rounded border-radius: 0.25rem; 4px

rounded-md border-radius: 0.375rem; 6px

rounded-lg border-radius: 0.5rem; 8px

rounded-xl border-radius: 0.75rem; 10px

rounded-2xl border-radius: 1rem; 12px

rounded-3xl border-radius: 1.5rem; 16px

rounded-full border-radius: 9999px;

rounded-t-none border-top-left-radius: 0; border-top-right-radius: 0;

rounded-r-none border-top-right-radius: 0; border-bottom-right-radius: 0;

rounded-b-none border-bottom-right-radius: 0; border-bottom-left-radius: 0;

rounded-l-none border-top-left-radius: 0; border-bottom-left-radius: 0;

border-top-left-radius: 0.125rem; border-top-right-radius:

rounded-t-sm 2px
0.125rem;

border-top-right-radius: 0.125rem; border-bottom-right-

rounded-r-sm 2px
radius: 0.125rem;

border-bottom-right-radius: 0.125rem; border-bottom-left-

rounded-b-sm 2px
radius: 0.125rem;

border-top-left-radius: 0.125rem; border-bottom-left-radius:

rounded-l-sm 2px
0.125rem;

border-top-left-radius: 0.25rem; border-top-right-radius:

rounded-t 4px
0.25rem;

border-top-right-radius: 0.25rem; border-bottom-right-radius:

rounded-r 4px
0.25rem;

border-bottom-right-radius: 0.25rem; border-bottom-left-

rounded-b 4px
radius: 0.25rem;

border-top-left-radius: 0.25rem; border-bottom-left-radius:

rounded-l 4px
0.25rem;

border-top-left-radius: 0.375rem; border-top-right-radius:

rounded-t-md 6px
0.375rem;
 border-top-right-radius: 0.375rem; border-bottom-right-
rounded-r-md 6px
radius: 0.375rem;

border-bottom-right-radius: 0.375rem; border-bottom-left-

rounded-b-md 6px
radius: 0.375rem;

border-top-left-radius: 0.375rem; border-bottom-left-radius:

rounded-l-md 6px
0.375rem;

border-top-left-radius: 0.5rem; border-top-right-radius:

rounded-t-lg 8px
0.5rem;

border-top-right-radius: 0.5rem; border-bottom-right-radius:

rounded-r-lg 8px
0.5rem;

border-bottom-right-radius: 0.5rem; border-bottom-left-

rounded-b-lg 8px
radius: 0.5rem;

border-top-left-radius: 0.5rem; border-bottom-left-radius:

rounded-l-lg 8px
0.5rem;

border-top-left-radius: 0.75rem; border-top-right-radius:

rounded-t-xl 10px
0.75rem;

border-top-right-radius: 0.75rem; border-bottom-right-radius:

rounded-r-xl 10px
0.75rem;

border-bottom-right-radius: 0.75rem; border-bottom-left-

rounded-b-xl 10px
radius: 0.75rem;

border-top-left-radius: 0.75rem; border-bottom-left-radius:

rounded-l-xl 10px
0.75rem;

rounded-t-2xl border-top-left-radius: 1rem; border-top-right-radius: 1rem; 12px

border-top-right-radius: 1rem; border-bottom-right-radius:

rounded-r-2xl 12px
1rem;

border-bottom-right-radius: 1rem; border-bottom-left-radius:

rounded-b-2xl 12px
1rem;

border-top-left-radius: 1rem; border-bottom-left-radius:

rounded-l-2xl 12px
1rem;

border-top-left-radius: 1.5rem; border-top-right-radius:

rounded-t-3xl 16px
1.5rem;

border-top-right-radius: 1.5rem; border-bottom-right-radius:

rounded-r-3xl 16px
1.5rem;

border-bottom-right-radius: 1.5rem; border-bottom-left-

rounded-b-3xl 16px
radius: 1.5rem;

border-top-left-radius: 1.5rem; border-bottom-left-radius:

rounded-l-3xl 16px
1.5rem;

border-top-left-radius: 9999px; border-top-right-radius:

rounded-t-full
9999px;
 border-top-right-radius: 9999px; border-bottom-right-radius:
rounded-r-full
9999px;

border-bottom-right-radius: 9999px; border-bottom-left-

rounded-b-full
radius: 9999px;

border-top-left-radius: 9999px; border-bottom-left-radius:

rounded-l-full
9999px;

rounded-tl-none border-top-left-radius: 0;

rounded-tr-none border-top-right-radius: 0;

rounded-br-none border-bottom-right-radius: 0;

rounded-bl-none border-bottom-left-radius: 0;

rounded-tl-sm border-top-left-radius: 0.125rem; 2px

rounded-tr-sm border-top-right-radius: 0.125rem; 2px

rounded-br-sm border-bottom-right-radius: 0.125rem; 2px

rounded-bl-sm border-bottom-left-radius: 0.125rem; 2px

rounded-tl border-top-left-radius: 0.25rem; 4px

rounded-tr border-top-right-radius: 0.25rem; 4px

rounded-br border-bottom-right-radius: 0.25rem; 4px

rounded-bl border-bottom-left-radius: 0.25rem; 4px

rounded-tl-md border-top-left-radius: 0.375rem; 6px

rounded-tr-md border-top-right-radius: 0.375rem; 6px

rounded-br-md border-bottom-right-radius: 0.375rem; 6px

rounded-bl-md border-bottom-left-radius: 0.375rem; 6px

rounded-tl-lg border-top-left-radius: 0.5rem; 8px

rounded-tr-lg border-top-right-radius: 0.5rem; 8px

rounded-br-lg border-bottom-right-radius: 0.5rem; 8px

rounded-bl-lg border-bottom-left-radius: 0.5rem; 8px

rounded-tl-xl border-top-left-radius: 0.75rem; 10px

rounded-tr-xl border-top-right-radius: 0.75rem; 10px

rounded-br-xl border-bottom-right-radius: 0.75rem; 10px

rounded-bl-xl border-bottom-left-radius: 0.75rem; 10px

rounded-tl-2xl border-top-left-radius: 1rem; 12px

 rounded-tr-2xl border-top-right-radius: 1rem; 12px

rounded-br-2xl border-bottom-right-radius: 1rem; 12px

rounded-bl-2xl border-bottom-left-radius: 1rem; 12px

rounded-tl-3xl border-top-left-radius: 1.5rem; 16px

rounded-tr-3xl border-top-right-radius: 1.5rem; 16px

rounded-br-3xl border-bottom-right-radius: 1.5rem; 16px

rounded-bl-3xl border-bottom-left-radius: 1.5rem; 16px

rounded-tl-full border-top-left-radius: 9999px;

rounded-tr-full border-top-right-radius: 9999px;

rounded-br-full border-bottom-right-radius: 9999px;

rounded-bl-full border-bottom-left-radius: 9999px;

Border Width DOCS

Sets width for borders in increments of 1px.

border border-width: 1px;

border-0 border-width: 0;

border-2 border-width: 2px;

border-4 border-width: 4px;

border-8 border-width: 8px;

border-t border-top-width: 1px;

border-t-0 border-top-width: 0;

border-t-2 border-top-width: 2px;

border-t-4 border-top-width: 4px;

border-t-8 border-top-width: 8px;

border-r border-right-width: 1px;

border-r-0 border-right-width: 0;

border-r-2 border-right-width: 2px;

border-r-4 border-right-width: 4px;

border-r-8 border-right-width: 8px;

 border-b border-bottom-width: 1px;

border-b-0 border-bottom-width: 0;

border-b-2 border-bottom-width: 2px;

border-b-4 border-bottom-width: 4px;

border-b-8 border-bottom-width: 8px;

border-l border-left-width: 1px;

border-l-0 border-left-width: 0;

border-l-2 border-left-width: 2px;

border-l-4 border-left-width: 4px;

border-l-8 border-left-width: 8px;

Border Color DOCS

Sets color for borders.

border-transparent border-color: transparent;

border-current border-color: currentColor;

border-black border-color: #000000;

border-white border-color: #ffffff;

border-gray-50 border-color: #F9FAFB;

border-gray-100 border-color: #F3F4F6;

border-gray-200 border-color: #E5E7EB;

border-gray-300 border-color: #D1D5DB;

border-gray-400 border-color: #9CA3AF;

border-gray-500 border-color: #6B7280;

border-gray-600 border-color: #4B5563;

border-gray-700 border-color: #374151;

border-gray-800 border-color: #1F2937;

border-gray-900 border-color: #111827;

border-red-50 border-color: #FEF2F2;

border-red-100 border-color: #FEE2E2;

border-red-200 border-color: #FECACA;

border-red-300 border-color: #FCA5A5;

border-red-400 border-color: #F87171;

border-red-500 border-color: #EF4444;

border-red-600 border-color: #DC2626;

border-red-700 border-color: #B91C1C;

border-red-800 border-color: #991B1B;

border-red-900 border-color: #7F1D1D;

border-yellow-50 border-color: #FFFBEB;

border-yellow-100 border-color: #FEF3C7;

border-yellow-200 border-color: #FDE68A;

border-yellow-300 border-color: #FCD34D;

border-yellow-400 border-color: #FBBF24;

border-yellow-500 border-color: #F59E0B;

border-yellow-600 border-color: #D97706;

border-yellow-700 border-color: #B45309;

border-yellow-800 border-color: #92400E;

border-yellow-900 border-color: #78350F;

border-green-50 border-color: #ECFDF5;

border-green-100 border-color: #D1FAE5;

border-green-200 border-color: #A7F3D0;

border-green-300 border-color: #6EE7B7;

border-green-400 border-color: #34D399;

border-green-500 border-color: #10B981;

border-green-600 border-color: #059669;

border-green-700 border-color: #047857;

border-green-800 border-color: #065F46;

border-green-900 border-color: #064E3B;

border-blue-50 border-color: #EFF6FF;

border-blue-100 border-color: #DBEAFE;

border-blue-200 border-color: #BFDBFE;

border-blue-300 border-color: #93C5FD;

border-blue-400 border-color: #60A5FA;

border-blue-500 border-color: #3B82F6;

border-blue-600 border-color: #2563EB;

border-blue-700 border-color: #1D4ED8;

border-blue-800 border-color: #1E40AF;

border-blue-900 border-color: #1E3A8A;

border-indigo-50 border-color: #EEF2FF;

border-indigo-100 border-color: #E0E7FF;

border-indigo-200 border-color: #C7D2FE;

border-indigo-300 border-color: #A5B4FC;

border-indigo-400 border-color: #818CF8;

border-indigo-500 border-color: #6366F1;

border-indigo-600 border-color: #4F46E5;

border-indigo-700 border-color: #4338CA;

border-indigo-800 border-color: #3730A3;

border-indigo-900 border-color: #312E81;

border-purple-50 border-color: #F5F3FF;

border-purple-100 border-color: #EDE9FE;

border-purple-200 border-color: #DDD6FE;

border-purple-300 border-color: #C4B5FD;

border-purple-400 border-color: #A78BFA;

border-purple-500 border-color: #8B5CF6;

border-purple-600 border-color: #7C3AED;

border-purple-700 border-color: #6D28D9;

border-purple-800 border-color: #5B21B6;

border-purple-900 border-color: #4C1D95;

border-pink-50 border-color: #FDF2F8;

border-pink-100 border-color: #FCE7F3;

border-pink-200 border-color: #FBCFE8;

border-pink-300 border-color: #F9A8D4;

border-pink-400 border-color: #F472B6;

border-pink-500 border-color: #EC4899;

border-pink-600 border-color: #DB2777;

border-pink-700 border-color: #BE185D;

 border-pink-800 border-color: #9D174D;

border-pink-900 border-color: #831843;

Border Opacity DOCS

Sets opacity for borders.

border-opacity-0 border-opacity: 0;

border-opacity-5 border-opacity: 0.05;

border-opacity-10 border-opacity: 0.1;

border-opacity-20 border-opacity: 0.2;

border-opacity-25 border-opacity: 0.25;

border-opacity-30 border-opacity: 0.3;

border-opacity-40 border-opacity: 0.4;

border-opacity-50 border-opacity: 0.5;

border-opacity-60 border-opacity: 0.6;

border-opacity-70 border-opacity: 0.7;

border-opacity-75 border-opacity: 0.75;

border-opacity-80 border-opacity: 0.8;

border-opacity-90 border-opacity: 0.9;

border-opacity-100 border-opacity: 1;

Border Style DOCS

Sets style for borders.

border-solid border-style: solid;

border-dashed border-style: dashed;

border-dotted border-style: dotted;

border-double border-style: double;

border-hidden border-style: hidden;

border-none border-style: none;

Divide Width DOCS

Controls the border width between elements.

divide-x-0 border-left-width: 0;

divide-x-2 border-left-width: 2px;

divide-x-4 border-left-width: 4px;

divide-x-8 border-left-width: 8px;

divide-x border-left-width: 1px;

divide-y-0 border-top-width: 0;

divide-y-2 border-top-width: 2px;

divide-y-4 border-top-width: 4px;

divide-y-8 border-top-width: 8px;

divide-y border-top-width: 1px;

divide-x-reverse --divide-x-reverse: 1

divide-y-reverse --divide-y-reverse: 1

Divide Color DOCS

Controls the border color between elements.

divide-transparent border-color: transparent;

divide-current border-color: currentColor;

divide-black border-color: #000000;

divide-white border-color: #ffffff;

divide-gray-50 border-color: #F9FAFB;

divide-gray-100 border-color: #F3F4F6;

divide-gray-200 border-color: #E5E7EB;

divide-gray-300 border-color: #D1D5DB;

divide-gray-400 border-color: #9CA3AF;

divide-gray-500 border-color: #6B7280;

divide-gray-600 border-color: #4B5563;

divide-gray-700 border-color: #374151;

divide-gray-800 border-color: #1F2937;

divide-gray-900 border-color: #111827;

divide-red-50 border-color: #FEF2F2;

divide-red-100 border-color: #FEE2E2;

divide-red-200 border-color: #FECACA;

divide-red-300 border-color: #FCA5A5;

divide-red-400 border-color: #F87171;

divide-red-500 border-color: #EF4444;

divide-red-600 border-color: #DC2626;

divide-red-700 border-color: #B91C1C;

divide-red-800 border-color: #991B1B;

divide-red-900 border-color: #7F1D1D;

divide-yellow-50 border-color: #FFFBEB;

divide-yellow-100 border-color: #FEF3C7;

divide-yellow-200 border-color: #FDE68A;

divide-yellow-300 border-color: #FCD34D;

divide-yellow-400 border-color: #FBBF24;

divide-yellow-500 border-color: #F59E0B;

divide-yellow-600 border-color: #D97706;

divide-yellow-700 border-color: #B45309;

divide-yellow-800 border-color: #92400E;

divide-yellow-900 border-color: #78350F;

divide-green-50 border-color: #ECFDF5;

divide-green-100 border-color: #D1FAE5;

divide-green-200 border-color: #A7F3D0;

divide-green-300 border-color: #6EE7B7;

divide-green-400 border-color: #34D399;

divide-green-500 border-color: #10B981;

divide-green-600 border-color: #059669;

divide-green-700 border-color: #047857;

divide-green-800 border-color: #065F46;

divide-green-900 border-color: #064E3B;

divide-blue-50 border-color: #EFF6FF;

divide-blue-100 border-color: #DBEAFE;

divide-blue-200 border-color: #BFDBFE;

divide-blue-300 border-color: #93C5FD;

divide-blue-400 border-color: #60A5FA;

divide-blue-500 border-color: #3B82F6;

divide-blue-600 border-color: #2563EB;

divide-blue-700 border-color: #1D4ED8;

divide-blue-800 border-color: #1E40AF;

divide-blue-900 border-color: #1E3A8A;

divide-indigo-50 border-color: #EEF2FF;

divide-indigo-100 border-color: #E0E7FF;

divide-indigo-200 border-color: #C7D2FE;

divide-indigo-300 border-color: #A5B4FC;

divide-indigo-400 border-color: #818CF8;

divide-indigo-500 border-color: #6366F1;

divide-indigo-600 border-color: #4F46E5;

divide-indigo-700 border-color: #4338CA;

divide-indigo-800 border-color: #3730A3;

divide-indigo-900 border-color: #312E81;

divide-purple-50 border-color: #F5F3FF;

divide-purple-100 border-color: #EDE9FE;

divide-purple-200 border-color: #DDD6FE;

divide-purple-300 border-color: #C4B5FD;

divide-purple-400 border-color: #A78BFA;

divide-purple-500 border-color: #8B5CF6;

divide-purple-600 border-color: #7C3AED;

divide-purple-700 border-color: #6D28D9;

divide-purple-800 border-color: #5B21B6;

divide-purple-900 border-color: #4C1D95;

divide-pink-50 border-color: #FDF2F8;

divide-pink-100 border-color: #FCE7F3;

divide-pink-200 border-color: #FBCFE8;

divide-pink-300 border-color: #F9A8D4;

divide-pink-400 border-color: #F472B6;

divide-pink-500 border-color: #EC4899;

 divide-pink-600 border-color: #DB2777;

divide-pink-700 border-color: #BE185D;

divide-pink-800 border-color: #9D174D;

divide-pink-900 border-color: #831843;

Divide Opacity DOCS

Controls 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;

Divide Style DOCS

Sets style for divides.

divide-solid border-style: solid;

divide-dashed border-style: dashed;

divide-dotted border-style: dotted;

divide-double border-style: double;

 divide-none border-style: none;

Outline Width DOCS

Utilities for controlling the width of an element's outline.

outline-0 outline-width: 0px;

outline-1 outline-width: 1px;

outline-2 outline-width: 2px;

outline-4 outline-width: 4px;

outline-8 outline-width: 8px;

Outline Style DOCS

Utilities for controlling the style of an element's outline.

outline-solid outline-style: solid;

outline-dashed outline-style: dashed;

outline-dotted outline-style: dotted;

outline-double outline-style: double;

outline-hidden outline-style: hidden;

outline-none outline-style: none;

Outline Offset DOCS

Utilities for controlling the Offset of an element's outline.

outline-offset-0 outline-offset: 0px;

outline-offset-1 outline-offset: 1px;

outline-offset-2 outline-offset: 2px;

outline-offset-4 outline-offset: 4px;

outline-offset-8 outline-offset: 8px;

Ring Width DOCS

Utilities for creating outline rings with box-shadows.

 box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-
ring-0
offset-width)) var(--tw-ring-color);

box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-

ring-1
offset-width)) var(--tw-ring-color);

box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-

ring-2
offset-width)) var(--tw-ring-color);

box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-

ring-4
offset-width)) var(--tw-ring-color);

box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-

ring-8
offset-width)) var(--tw-ring-color);

box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-

ring
offset-width)) var(--tw-ring-color);

ring-inset --tw-ring-inset: inset;

Ring Color DOCS

Utilities for setting the color of outline rings.

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;

Ring Opacity DOCS

Utilities for setting the opacity of outline rings.

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;

Ring Offset Width DOCS

Utilities for simulating an offset when adding outline rings.

--ring-offset-width: 0px; box-shadow: 0 0 0 var(--ring-offset-

ring-offset-0
width) var(--ring-offset-color), var(--ring-shadow);

--ring-offset-width: 1px; box-shadow: 0 0 0 var(--ring-offset-

ring-offset-1
width) var(--ring-offset-color), var(--ring-shadow);

--ring-offset-width: 2px; box-shadow: 0 0 0 var(--ring-offset-

ring-offset-2
width) var(--ring-offset-color), var(--ring-shadow);

--ring-offset-width: 4px; box-shadow: 0 0 0 var(--ring-offset-

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

Ring Offset Color DOCS

Utilities for setting the color of outline rings offset.

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;

Sizing

Width DOCS

w-0 width: 0;

w-0.5 width: 0.125rem; 2px

w-1 width: 0.25rem; 4px

w-1.5 width: 0.375rem; 6px

w-2 width: 0.5rem; 8px

w-2.5 width: 0.625rem; 10px

w-3 width: 0.75rem; 12px

w-3.5 width: 0.875rem; 14px

w-4 width: 1rem; 16px

w-5 width: 1.25rem; 20px

w-6 width: 1.5rem; 24px

w-8 width: 2rem; 32px

w-10 width: 2.5rem; 40px

w-11 width: 2.75rem; 44px

w-12 width: 3rem; 48px

w-14 width: 3.5rem; 56px

w-16 width: 4rem; 64px

w-20 width: 5rem; 80px

w-24 width: 6rem; 96px

w-28 width: 7rem; 112px

w-32 width: 8rem; 128px

w-36 width: 9rem; 144px

w-40 width: 10rem; 160px

w-44 width: 11rem; 176px

w-48 width: 12rem; 192px

w-52 width: 13rem; 208px

w-56 width: 14rem; 224px

w-64 width: 16rem; 256px

w-72 width: 18rem; 288px

w-80 width: 20rem; 320px

w-96 width: 24rem; 384px

w-px width: 1px;

w-auto width: auto;

w-1/2 width: 50%;

w-1/3 width: 33.333333%;

w-2/3 width: 66.666667%;

w-1/4 width: 25%;

w-2/4 width: 50%;

w-3/4 width: 75%;

w-1/5 width: 20%;

w-2/5 width: 40%;

w-3/5 width: 60%;

w-4/5 width: 80%;

w-1/6 width: 16.666667%;

w-2/6 width: 33.333333%;

w-3/6 width: 50%;

w-4/6 width: 66.666667%;

w-5/6 width: 83.333333%;

w-1/12 width: 8.333333%;

w-2/12 width: 16.666667%;

w-3/12 width: 25%;

w-4/12 width: 33.333333%;

w-5/12 width: 41.666667%;

w-6/12 width: 50%;

w-7/12 width: 58.333333%;

w-8/12 width: 66.666667%;

w-9/12 width: 75%;

w-10/12 width: 83.333333%;

w-11/12 width: 91.666667%;

w-full width: 100%;

w-screen width: 100vw;

 w-min width: min-content;

w-max width: max-content;

w-fit width: fit-content;

Min Width DOCS

Sets the minimum width of an element.

min-w-0 min-width: 0;

min-w-full min-width: 100%;

min-w-min min-width: min-content;

min-w-max min-width: max-content;

min-w-fit min-width: fit-content;

Max Width DOCS

Sets the maxiumum width of an element.

max-w-0 max-width: 0rem;

max-w-none max-width: none;

max-w-xs max-width: 20rem; 320px

max-w-sm max-width: 24rem; 384px

max-w-md max-width: 28rem; 448px

max-w-lg max-width: 32rem; 512px

max-w-xl max-width: 36rem; 576px

max-w-2xl max-width: 42rem; 672px

max-w-3xl max-width: 48rem; 768px

max-w-4xl max-width: 56rem; 896px

max-w-5xl max-width: 64rem; 1024px

max-w-6xl max-width: 72rem; 1152px

max-w-7xl max-width: 80rem; 1280px

max-w-full max-width: 100%;

max-w-min max-width: min-content;

 max-w-max max-width: max-content;

max-w-fit max-width: fit-content;

max-w-prose max-width: 65ch;

max-w-screen-sm max-width: 640px;

max-w-screen-md max-width: 768px;

max-w-screen-lg max-width: 1024px;

max-w-screen-xl max-width: 1280px;

max-w-screen-2xl max-width: 1536px;

Height DOCS

h-0 height: 0;

h-0.5 height: 0.125rem; 2px

h-1 height: 0.25rem; 4px

h-1.5 height: 0.375rem; 6px

h-2 height: 0.5rem; 8px

h-2.5 height: 0.625rem; 10px

h-3 height: 0.75rem; 12px

h-3.5 height: 0.875rem; 14px

h-4 height: 1rem; 16px

h-5 height: 1.25rem; 20px

h-6 height: 1.5rem; 24px

h-8 height: 2rem; 32px

h-10 height: 2.5rem; 40px

h-11 height: 2.75rem; 44px

h-12 height: 3rem; 48px

h-14 height: 3.5rem; 56px

h-16 height: 4rem; 64px

h-20 height: 5rem; 80px

h-24 height: 6rem; 96px

h-28 height: 7rem; 112px

h-32 height: 8rem; 128px

h-36 height: 9rem; 144px

h-40 height: 10rem; 160px

h-44 height: 11rem; 176px

h-48 height: 12rem; 192px

h-52 height: 13rem; 208px

h-56 height: 14rem; 224px

h-64 height: 16rem; 256px

h-72 height: 18rem; 288px

h-80 height: 20rem; 320px

h-96 height: 24rem; 384px

h-px height: 1px;

h-auto height: auto;

h-1/2 height: 50%;

h-1/3 height: 33.333333%;

h-2/3 height: 66.666667%;

h-1/4 height: 25%;

h-2/4 height: 50%;

h-3/4 height: 75%;

h-1/5 height: 20%;

h-2/5 height: 40%;

h-3/5 height: 60%;

h-4/5 height: 80%;

h-1/6 height: 16.666667%;

h-2/6 height: 33.333333%;

h-3/6 height: 50%;

h-4/6 height: 66.666667%;

h-5/6 height: 83.333333%;

 h-full height: 100%;

h-screen height: 100vh;

h-min height: min-content;

h-max height: max-content;

h-fit height: fit-content;

Min Height DOCS

Sets the minimum height of an element.

min-h-0 min-height: 0;

min-h-full min-height: 100%;

min-h-screen min-height: 100vh;

min-h-min min-height: min-content;

min-h-max min-height: max-content;

min-h-fit min-height: fit-content;

Max Height DOCS

Sets the maxiumum height of an element.

max-h-0 max-height: 0;

max-h-0.5 max-height: 0.125rem; 2px

max-h-1 max-height: 0.25rem; 4px

max-h-1.5 max-height: 0.375rem; 6px

max-h-2 max-height: 0.5rem; 8px

max-h-2.5 max-height: 0.625rem; 10px

max-h-3 max-height: 0.75rem; 12px

max-h-3.5 max-height: 0.875rem; 14px

max-h-4 max-height: 1rem; 16px

max-h-5 max-height: 1.25rem; 20px

max-h-6 max-height: 1.5rem; 24px

max-h-8 max-height: 2rem; 32px

 max-h-10 max-height: 2.5rem; 40px

max-h-11 max-height: 2.75rem; 44px

max-h-12 max-height: 3rem; 48px

max-h-14 max-height: 3.5rem; 56px

max-h-16 max-height: 4rem; 64px

max-h-20 max-height: 5rem; 80px

max-h-24 max-height: 6rem; 96px

max-h-28 max-height: 7rem; 112px

max-h-32 max-height: 8rem; 128px

max-h-36 max-height: 9rem; 144px

max-h-40 max-height: 10rem; 160px

max-h-44 max-height: 11rem; 176px

max-h-48 max-height: 12rem; 192px

max-h-52 max-height: 13rem; 208px

max-h-56 max-height: 14rem; 224px

max-h-64 max-height: 16rem; 256px

max-h-72 max-height: 18rem; 288px

max-h-80 max-height: 20rem; 320px

max-h-96 max-height: 24rem; 384px

max-h-px max-height: 1px;

max-h-full max-height: 100%;

max-h-screen max-height: 100vh;

max-h-min max-height: min-content;

max-h-max max-height: max-content;

max-h-fit max-height: fit-content;

Typography

Font Family DOCS

Sets the font family.

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

font-sans Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

font-serif font-family: Georgia, Cambria, "Times New Roman", Times, serif;

font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier

font-mono
New", monospace;

Font Size DOCS

Sets the font size.

text-xs font-size: 0.75rem; line-height: 1rem; 12px

text-sm font-size: 0.875rem; line-height: 1.25rem; 14px

text-base font-size: 1rem; line-height: 1.5rem; 16px

text-lg font-size: 1.125rem; line-height: 1.75rem; 18px

text-xl font-size: 1.25rem; line-height: 1.75rem; 20px

text-2xl font-size: 1.5rem; line-height: 2rem; 24px

text-3xl font-size: 1.875rem; line-height: 2.25rem; 30px

text-4xl font-size: 2.25rem; line-height: 2.5rem; 36px

text-5xl font-size: 3rem; line-height: 1; 48px

text-6xl font-size: 3.75rem; line-height: 1; 64px

text-7xl font-size: 4.5rem; line-height: 1; 72px

text-8xl font-size: 6rem; line-height: 1; 80px

text-9xl font-size: 8rem; line-height: 1; 96px

Font Smoothing DOCS

-webkit-font-smoothing: antialiased; -moz-osx-font-

antialiased
smoothing: grayscale;

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

Font Style DOCS

italic font-style: italic;

 not-italic font-style: normal;

Font Weight DOCS

Sets the font weight.

font-thin font-weight: 100;

font-extralight font-weight: 200;

font-light font-weight: 300;

font-normal font-weight: 400;

font-medium font-weight: 500;

font-semibold font-weight: 600;

font-bold font-weight: 700;

font-extrabold font-weight: 800;

font-black font-weight: 900;

Font Variant Numeric DOCS

Utilities for controlling the variant of numbers.

normal-nums font-variant-numeric: normal;

ordinal font-variant-numeric: ordinal;

slashed-zero font-variant-numeric: slashed-zero;

lining-nums font-variant-numeric: lining-nums;

oldstyle-nums font-variant-numeric: oldstyle-nums;

proportional-nums font-variant-numeric: proportional-nums;

tabular-nums font-variant-numeric: tabular-nums;

diagonal-fractions font-variant-numeric: diagonal-fractions;

stacked-fractions font-variant-numeric: stacked-fractions;

Letter Spacing DOCS

Sets the spacing between letters.

tracking-tighter letter-spacing: -0.05em;

 tracking-tight letter-spacing: -0.025em;

tracking-normal letter-spacing: 0;

tracking-wide letter-spacing: 0.025em;

tracking-wider letter-spacing: 0.05em;

tracking-widest letter-spacing: 0.1em;

Line Height DOCS

Sets the line height.

leading-none line-height: 1;

leading-tight line-height: 1.25;

leading-snug line-height: 1.375;

leading-normal line-height: 1.5;

leading-relaxed line-height: 1.625;

leading-loose line-height: 2;

leading-3 line-height: .75rem; 12px

leading-4 line-height: 1rem; 16px

leading-5 line-height: 1.25rem; 20px

leading-6 line-height: 1.5rem; 24px

leading-7 line-height: 1.75rem; 28px

leading-8 line-height: 2rem; 32px

leading-9 line-height: 2.25rem; 36px

leading-10 line-height: 2.5rem; 40px

List Style Type DOCS

Sets the bullet style of a list.

list-none list-style-type: none;

list-disc list-style-type: disc;

list-decimal list-style-type: decimal;

List Style Position DOCS

Sets the position of a list's bullets.

list-inside list-style-position: inside;

list-outside list-style-position: outside;

Text Align DOCS

Sets the alignment of text.

text-left text-align: left;

text-center text-align: center;

text-right text-align: right;

text-justify text-align: justify;

Text Color DOCS

Sets the text color.

text-transparent color: transparent;

text-current color: currentColor;

text-black color: #000000;

text-white color: #ffffff;

text-gray-50 color: #F9FAFB;

text-gray-100 color: #F3F4F6;

text-gray-200 color: #E5E7EB;

text-gray-300 color: #D1D5DB;

text-gray-400 color: #9CA3AF;

text-gray-500 color: #6B7280;

text-gray-600 color: #4B5563;

text-gray-700 color: #374151;

text-gray-800 color: #1F2937;

text-gray-900 color: #111827;

text-red-50 color: #FEF2F2;

text-red-100 color: #FEE2E2;

text-red-200 color: #FECACA;

text-red-300 color: #FCA5A5;

text-red-400 color: #F87171;

text-red-500 color: #EF4444;

text-red-600 color: #DC2626;

text-red-700 color: #B91C1C;

text-red-800 color: #991B1B;

text-red-900 color: #7F1D1D;

text-yellow-50 color: #FFFBEB;

text-yellow-100 color: #FEF3C7;

text-yellow-200 color: #FDE68A;

text-yellow-300 color: #FCD34D;

text-yellow-400 color: #FBBF24;

text-yellow-500 color: #F59E0B;

text-yellow-600 color: #D97706;

text-yellow-700 color: #B45309;

text-yellow-800 color: #92400E;

text-yellow-900 color: #78350F;

text-green-50 color: #ECFDF5;

text-green-100 color: #D1FAE5;

text-green-200 color: #A7F3D0;

text-green-300 color: #6EE7B7;

text-green-400 color: #34D399;

text-green-500 color: #10B981;

text-green-600 color: #059669;

text-green-700 color: #047857;

text-green-800 color: #065F46;

text-green-900 color: #064E3B;

text-blue-50 color: #EFF6FF;

text-blue-100 color: #DBEAFE;

text-blue-200 color: #BFDBFE;

text-blue-300 color: #93C5FD;

text-blue-400 color: #60A5FA;

text-blue-500 color: #3B82F6;

text-blue-600 color: #2563EB;

text-blue-700 color: #1D4ED8;

text-blue-800 color: #1E40AF;

text-blue-900 color: #1E3A8A;

text-indigo-50 color: #EEF2FF;

text-indigo-100 color: #E0E7FF;

text-indigo-200 color: #C7D2FE;

text-indigo-300 color: #A5B4FC;

text-indigo-400 color: #818CF8;

text-indigo-500 color: #6366F1;

text-indigo-600 color: #4F46E5;

text-indigo-700 color: #4338CA;

text-indigo-800 color: #3730A3;

text-indigo-900 color: #312E81;

text-purple-50 color: #F5F3FF;

text-purple-100 color: #EDE9FE;

text-purple-200 color: #DDD6FE;

text-purple-300 color: #C4B5FD;

text-purple-400 color: #A78BFA;

text-purple-500 color: #8B5CF6;

text-purple-600 color: #7C3AED;

text-purple-700 color: #6D28D9;

text-purple-800 color: #5B21B6;

text-purple-900 color: #4C1D95;

text-pink-50 color: #FDF2F8;

text-pink-100 color: #FCE7F3;

text-pink-200 color: #FBCFE8;

text-pink-300 color: #F9A8D4;

text-pink-400 color: #F472B6;

text-pink-500 color: #EC4899;

text-pink-600 color: #DB2777;

 text-pink-700 color: #BE185D;

text-pink-800 color: #9D174D;

text-pink-900 color: #831843;

Text Decoration DOCS

Utilities for controlling the decoration of text.

underline text-decoration: underline;

overline text-decoration: overline;

line-through text-decoration: line-through;

no-underline text-decoration: none;

Text Decoration Style DOCS

Utilities for controlling the style of text decorations.

decoration-solid text-decoration-style: solid;

decoration-double text-decoration-style: double;

decoration-dotted text-decoration-style: dotted;

decoration-dashed text-decoration-style: dashed;

decoration-wavy text-decoration-style: wavy;

Text Decoration Thickness DOCS

Utilities for controlling the thickness of text decorations.

decoration-auto text-decoration-thickness: auto;

decoration-from-font text-decoration-thickness: from-font;

decoration-0 text-decoration-thickness: 0px;

decoration-1 text-decoration-thickness: 1px;

decoration-2 text-decoration-thickness: 2px;

decoration-4 text-decoration-thickness: 4px;

decoration-8 text-decoration-thickness: 8px;

Text Underline Offset DOCS

Utilities for controlling the offset of a text underline.

underline-offset-auto text-underline-offset: auto;

underline-offset-from-font text-underline-offset: from-font;

underline-offset-0 text-underline-offset: 0px;

underline-offset-1 text-underline-offset: 1px;

underline-offset-2 text-underline-offset: 2px;

underline-offset-4 text-underline-offset: 4px;

underline-offset-8 text-underline-offset: 8px;

Text Transform DOCS

Utilities for controlling the transformation of text.

uppercase text-transform: uppercase;

lowercase text-transform: lowercase;

capitalize text-transform: capitalize;

normal-case text-transform: none;

Text Overflow DOCS

Utilities for controlling text overflow in an element.

truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

text-ellipsis text-overflow: ellipsis;

text-clip text-overflow: clip;

Text Indent DOCS

Utilities for controlling the amount of empty space shown before text in a block.

indent-0 text-indent: 0;

indent-0.5 text-indent: 0.125rem; 2px

indent-1 text-indent: 0.25rem; 4px

indent-1.5 text-indent: 0.375rem; 6px

indent-2 text-indent: 0.5rem; 8px

indent-2.5 text-indent: 0.625rem; 10px

indent-3 text-indent: 0.75rem; 12px

indent-3.5 text-indent: 0.875rem; 14px

indent-4 text-indent: 1rem; 16px

indent-5 text-indent: 1.25rem; 20px

indent-6 text-indent: 1.5rem; 24px

indent-8 text-indent: 2rem; 32px

indent-10 text-indent: 2.5rem; 40px

indent-11 text-indent: 2.75rem; 44px

indent-12 text-indent: 3rem; 48px

indent-14 text-indent: 3.5rem; 56px

indent-16 text-indent: 4rem; 64px

indent-20 text-indent: 5rem; 80px

indent-24 text-indent: 6rem; 96px

indent-28 text-indent: 7rem; 112px

indent-32 text-indent: 8rem; 128px

indent-36 text-indent: 9rem; 144px

indent-40 text-indent: 10rem; 160px

indent-44 text-indent: 11rem; 176px

indent-48 text-indent: 12rem; 192px

indent-52 text-indent: 13rem; 208px

indent-56 text-indent: 14rem; 224px

indent-64 text-indent: 16rem; 256px

indent-72 text-indent: 18rem; 288px

indent-80 text-indent: 20rem; 320px

indent-96 text-indent: 24rem; 384px

indent-px text-indent: 1px;

Vertical Align DOCS

Sets the vertical alignment of an inline or table-cell box.

align-baseline vertical-align: baseline;

align-top vertical-align: top;

align-middle vertical-align: middle;

align-bottom vertical-align: bottom;

align-text-top vertical-align: text-top;

align-text-bottom vertical-align: text-bottom;

align-sub vertical-align: sub;

align-super vertical-align: super;

White Space DOCS

Sets the whitespace of an element.

whitespace-normal white-space: normal;

whitespace-nowrap white-space: nowrap;

whitespace-pre white-space: pre;

whitespace-pre-line white-space: pre-line;

whitespace-pre-wrap white-space: pre-wrap;

Word Break DOCS

Sets the word breaks of an element.

break-normal overflow-wrap: normal; word-break: normal;

break-words overflow-wrap: break-word;

break-all word-break: break-all;

Content DOCS

Utilities for controlling the content of the before and after pseudo-elements.

content-none content: none;

 Backgrounds

Background Attachment DOCS

Sets behavior of background images when scrolling.

bg-fixed background-attachment: fixed;

bg-local background-attachment: local;

bg-scroll background-attachment: scroll;

Background Clip DOCS

Sets behavior of Utilities for controlling the bounding box of an element's background.

bg-clip-border background-clip: border-box;

bg-clip-padding background-clip: padding-box;

bg-clip-content background-clip: content-box;

bg-clip-text background-clip: text;

Background Color DOCS

Sets background color.

bg-transparent background-color: transparent;

bg-current background-color: currentColor;

bg-black background-color: #000000;

bg-white background-color: #ffffff;

bg-gray-50 background-color: #F9FAFB;

bg-gray-100 background-color: #F3F4F6;

bg-gray-200 background-color: #E5E7EB;

bg-gray-300 background-color: #D1D5DB;

bg-gray-400 background-color: #9CA3AF;

bg-gray-500 background-color: #6B7280;

bg-gray-600 background-color: #6B7280;

bg-gray-700 background-color: #374151;

bg-gray-800 background-color: #1F2937;

bg-gray-900 background-color: #111827;

bg-red-50 background-color: #FEF2F2;

bg-red-100 background-color: #FEE2E2;

bg-red-200 background-color: #FECACA;

bg-red-300 background-color: #FCA5A5;

bg-red-400 background-color: #F87171;

bg-red-500 background-color: #EF4444;

bg-red-600 background-color: #DC2626;

bg-red-700 background-color: #B91C1C;

bg-red-800 background-color: #991B1B;

bg-red-900 background-color: #7F1D1D;

bg-yellow-50 background-color: #FFFBEB;

bg-yellow-100 background-color: #FEF3C7;

bg-yellow-200 background-color: #FDE68A;

bg-yellow-300 background-color: #FCD34D;

bg-yellow-400 background-color: #FBBF24;

bg-yellow-500 background-color: #F59E0B;

bg-yellow-600 background-color: #D97706;

bg-yellow-700 background-color: #B45309;

bg-yellow-800 background-color: #92400E;

bg-yellow-900 background-color: #78350F;

bg-green-50 background-color: #ECFDF5;

bg-green-100 background-color: #D1FAE5;

bg-green-200 background-color: #A7F3D0;

bg-green-300 background-color: #6EE7B7;

bg-green-400 background-color: #34D399;

bg-green-500 background-color: #10B981;

bg-green-600 background-color: #059669;

bg-green-700 background-color: #047857;

bg-green-800 background-color: #065F46;

bg-green-900 background-color: #064E3B;

bg-blue-50 background-color: #EFF6FF;

bg-blue-100 background-color: #DBEAFE;

bg-blue-200 background-color: #BFDBFE;

bg-blue-300 background-color: #93C5FD;

bg-blue-400 background-color: #60A5FA;

bg-blue-500 background-color: #3B82F6;

bg-blue-600 background-color: #2563EB;

bg-blue-700 background-color: #1D4ED8;

bg-blue-800 background-color: #1E40AF;

bg-blue-900 background-color: #1E3A8A;

bg-indigo-50 background-color: #EEF2FF;

bg-indigo-100 background-color: #E0E7FF;

bg-indigo-200 background-color: #C7D2FE;

bg-indigo-300 background-color: #A5B4FC;

bg-indigo-400 background-color: #818CF8;

bg-indigo-500 background-color: #6366F1;

bg-indigo-600 background-color: #4F46E5;

bg-indigo-700 background-color: #4338CA;

bg-indigo-800 background-color: #3730A3;

bg-indigo-900 background-color: #312E81;

bg-purple-50 background-color: #F5F3FF;

bg-purple-100 background-color: #EDE9FE;

bg-purple-200 background-color: #DDD6FE;

bg-purple-300 background-color: #C4B5FD;

bg-purple-400 background-color: #A78BFA;

bg-purple-500 background-color: #8B5CF6;

bg-purple-600 background-color: #7C3AED;

bg-purple-700 background-color: #6D28D9;

bg-purple-800 background-color: #5B21B6;

bg-purple-900 background-color: #4C1D95;

bg-pink-50 background-color: #FDF2F8;

bg-pink-100 background-color: #FCE7F3;

bg-pink-200 background-color: #FBCFE8;

bg-pink-300 background-color: #F9A8D4;

 bg-pink-400 background-color: #F472B6;

bg-pink-500 background-color: #EC4899;

bg-pink-600 background-color: #DB2777;

bg-pink-700 background-color: #BE185D;

bg-pink-800 background-color: #9D174D;

bg-pink-900 background-color: #831843;

Background Opacity DOCS

Sets background opacity.

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;

Background Origin DOCS

Utilities for controlling how an element's background is positioned relative to borders,

padding, and content.
 bg-origin-border background-origin: border-box;

bg-origin-padding background-origin: padding-box;

bg-origin-content background-origin: content-box;

Background Position DOCS

Sets position of a background image.

bg-bottom background-position: bottom;

bg-center background-position: center;

bg-left background-position: left;

bg-left-bottom background-position: left bottom;

bg-left-top background-position: left top;

bg-right background-position: right;

bg-right-bottom background-position: right bottom;

bg-right-top background-position: right top;

bg-top background-position: top;

Background Repeat DOCS

Sets repetition of a background image.

bg-repeat background-repeat: repeat;

bg-no-repeat background-repeat: no-repeat;

bg-repeat-x background-repeat: repeat-x;

bg-repeat-y background-repeat: repeat-y;

bg-repeat-round background-repeat: round;

bg-repeat-space background-repeat: space;

Background Size DOCS

Sets background size of a background image.

bg-auto background-size: auto;

bg-cover background-size: cover;

 bg-contain background-size: contain;

Background Image DOCS

Utilities for controlling an element's background image.

bg-none background-image: none;

background-image:background-image: background-image: linear-

bg-gradient-to-t
gradient(to top, var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to top

bg-gradient-to-tr
right, var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to right,

bg-gradient-to-r
var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to bottom

bg-gradient-to-br
right, var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to bottom,

bg-gradient-to-b
var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to bottom

bg-gradient-to-bl
left, var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to left,

bg-gradient-to-l
var(--tw-gradient-stops));

background-image: background-image: linear-gradient(to top

bg-gradient-to-tl
left, var(--tw-gradient-stops));

Gradient Color Stops DOCS

Utilities for controlling the color stops in background gradients.

from-transparent background-color: transparent;

from-current background-color: currentColor;

from-black background-color: #000000;

from-white background-color: #ffffff;

from-gray-50 background-color: #F9FAFB;

from-gray-100 background-color: #F3F4F6;

from-gray-200 background-color: #E5E7EB;

from-gray-300 background-color: #D1D5DB;

from-gray-400 background-color: #9CA3AF;

from-gray-500 background-color: #6B7280;

from-gray-600 background-color: #6B7280;

from-gray-700 background-color: #374151;

from-gray-800 background-color: #1F2937;

from-gray-900 background-color: #111827;

from-red-50 background-color: #FEF2F2;

from-red-100 background-color: #FEE2E2;

from-red-200 background-color: #FECACA;

from-red-300 background-color: #FCA5A5;

from-red-400 background-color: #F87171;

from-red-500 background-color: #EF4444;

from-red-600 background-color: #DC2626;

from-red-700 background-color: #B91C1C;

from-red-800 background-color: #991B1B;

from-red-900 background-color: #7F1D1D;

from-yellow-50 background-color: #FFFBEB;

from-yellow-100 background-color: #FEF3C7;

from-yellow-200 background-color: #FDE68A;

from-yellow-300 background-color: #FCD34D;

from-yellow-400 background-color: #FBBF24;

from-yellow-500 background-color: #F59E0B;

from-yellow-600 background-color: #D97706;

from-yellow-700 background-color: #B45309;

from-yellow-800 background-color: #92400E;

from-yellow-900 background-color: #78350F;

from-green-50 background-color: #ECFDF5;

from-green-100 background-color: #D1FAE5;

from-green-200 background-color: #A7F3D0;

from-green-300 background-color: #6EE7B7;

from-green-400 background-color: #34D399;

from-green-500 background-color: #10B981;

from-green-600 background-color: #059669;

from-green-700 background-color: #047857;

from-green-800 background-color: #065F46;

from-green-900 background-color: #064E3B;

from-blue-50 background-color: #EFF6FF;

from-blue-100 background-color: #DBEAFE;

from-blue-200 background-color: #BFDBFE;

from-blue-300 background-color: #93C5FD;

from-blue-400 background-color: #60A5FA;

from-blue-500 background-color: #3B82F6;

from-blue-600 background-color: #2563EB;

from-blue-700 background-color: #1D4ED8;

from-blue-800 background-color: #1E40AF;

from-blue-900 background-color: #1E3A8A;

from-indigo-50 background-color: #EEF2FF;

from-indigo-100 background-color: #E0E7FF;

from-indigo-200 background-color: #C7D2FE;

from-indigo-300 background-color: #A5B4FC;

from-indigo-400 background-color: #818CF8;

from-indigo-500 background-color: #6366F1;

from-indigo-600 background-color: #4F46E5;

from-indigo-700 background-color: #4338CA;

from-indigo-800 background-color: #3730A3;

from-indigo-900 background-color: #312E81;

from-purple-50 background-color: #F5F3FF;

from-purple-100 background-color: #EDE9FE;

from-purple-200 background-color: #DDD6FE;

from-purple-300 background-color: #C4B5FD;

from-purple-400 background-color: #A78BFA;

from-purple-500 background-color: #8B5CF6;

from-purple-600 background-color: #7C3AED;

from-purple-700 background-color: #6D28D9;

from-purple-800 background-color: #5B21B6;

from-purple-900 background-color: #4C1D95;

from-pink-50 background-color: #FDF2F8;

from-pink-100 background-color: #FCE7F3;

from-pink-200 background-color: #FBCFE8;

from-pink-300 background-color: #F9A8D4;

from-pink-400 background-color: #F472B6;

from-pink-500 background-color: #EC4899;

from-pink-600 background-color: #DB2777;

from-pink-700 background-color: #BE185D;

from-pink-800 background-color: #9D174D;

from-pink-900 background-color: #831843;

via-transparent background-color: transparent;

via-current background-color: currentColor;

via-black background-color: #000000;

via-white background-color: #ffffff;

via-gray-50 background-color: #F9FAFB;

via-gray-100 background-color: #F3F4F6;

via-gray-200 background-color: #E5E7EB;

via-gray-300 background-color: #D1D5DB;

via-gray-400 background-color: #9CA3AF;

via-gray-500 background-color: #6B7280;

via-gray-600 background-color: #6B7280;

via-gray-700 background-color: #374151;

via-gray-800 background-color: #1F2937;

via-gray-900 background-color: #111827;

via-red-50 background-color: #FEF2F2;

via-red-100 background-color: #FEE2E2;

via-red-200 background-color: #FECACA;

via-red-300 background-color: #FCA5A5;

via-red-400 background-color: #F87171;

via-red-500 background-color: #EF4444;

via-red-600 background-color: #DC2626;

via-red-700 background-color: #B91C1C;

via-red-800 background-color: #991B1B;

via-red-900 background-color: #7F1D1D;

via-yellow-50 background-color: #FFFBEB;

via-yellow-100 background-color: #FEF3C7;

via-yellow-200 background-color: #FDE68A;

via-yellow-300 background-color: #FCD34D;

via-yellow-400 background-color: #FBBF24;

via-yellow-500 background-color: #F59E0B;

via-yellow-600 background-color: #D97706;

via-yellow-700 background-color: #B45309;

via-yellow-800 background-color: #92400E;

via-yellow-900 background-color: #78350F;

via-green-50 background-color: #ECFDF5;

via-green-100 background-color: #D1FAE5;

via-green-200 background-color: #A7F3D0;

via-green-300 background-color: #6EE7B7;

via-green-400 background-color: #34D399;

via-green-500 background-color: #10B981;

via-green-600 background-color: #059669;

via-green-700 background-color: #047857;

via-green-800 background-color: #065F46;

via-green-900 background-color: #064E3B;

via-blue-50 background-color: #EFF6FF;

via-blue-100 background-color: #DBEAFE;

via-blue-200 background-color: #BFDBFE;

via-blue-300 background-color: #93C5FD;

via-blue-400 background-color: #60A5FA;

via-blue-500 background-color: #3B82F6;

via-blue-600 background-color: #2563EB;

via-blue-700 background-color: #1D4ED8;

via-blue-800 background-color: #1E40AF;

via-blue-900 background-color: #1E3A8A;

via-indigo-50 background-color: #EEF2FF;

via-indigo-100 background-color: #E0E7FF;

via-indigo-200 background-color: #C7D2FE;

via-indigo-300 background-color: #A5B4FC;

via-indigo-400 background-color: #818CF8;

via-indigo-500 background-color: #6366F1;

via-indigo-600 background-color: #4F46E5;

via-indigo-700 background-color: #4338CA;

via-indigo-800 background-color: #3730A3;

via-indigo-900 background-color: #312E81;

via-purple-50 background-color: #F5F3FF;

via-purple-100 background-color: #EDE9FE;

via-purple-200 background-color: #DDD6FE;

via-purple-300 background-color: #C4B5FD;

via-purple-400 background-color: #A78BFA;

via-purple-500 background-color: #8B5CF6;

via-purple-600 background-color: #7C3AED;

via-purple-700 background-color: #6D28D9;

via-purple-800 background-color: #5B21B6;

via-purple-900 background-color: #4C1D95;

via-pink-50 background-color: #FDF2F8;

via-pink-100 background-color: #FCE7F3;

via-pink-200 background-color: #FBCFE8;

via-pink-300 background-color: #F9A8D4;

via-pink-400 background-color: #F472B6;

via-pink-500 background-color: #EC4899;

via-pink-600 background-color: #DB2777;

via-pink-700 background-color: #BE185D;

via-pink-800 background-color: #9D174D;

via-pink-900 background-color: #831843;

to-transparent background-color: transparent;

to-current background-color: currentColor;

to-black background-color: #000000;

to-white background-color: #ffffff;

to-gray-50 background-color: #F9FAFB;

to-gray-100 background-color: #F3F4F6;

to-gray-200 background-color: #E5E7EB;

to-gray-300 background-color: #D1D5DB;

to-gray-400 background-color: #9CA3AF;

to-gray-500 background-color: #6B7280;

to-gray-600 background-color: #6B7280;

to-gray-700 background-color: #374151;

to-gray-800 background-color: #1F2937;

to-gray-900 background-color: #111827;

to-red-50 background-color: #FEF2F2;

to-red-100 background-color: #FEE2E2;

to-red-200 background-color: #FECACA;

to-red-300 background-color: #FCA5A5;

to-red-400 background-color: #F87171;

to-red-500 background-color: #EF4444;

to-red-600 background-color: #DC2626;

to-red-700 background-color: #B91C1C;

to-red-800 background-color: #991B1B;

to-red-900 background-color: #7F1D1D;

to-yellow-50 background-color: #FFFBEB;

to-yellow-100 background-color: #FEF3C7;

to-yellow-200 background-color: #FDE68A;

to-yellow-300 background-color: #FCD34D;

to-yellow-400 background-color: #FBBF24;

to-yellow-500 background-color: #F59E0B;

to-yellow-600 background-color: #D97706;

to-yellow-700 background-color: #B45309;

to-yellow-800 background-color: #92400E;

to-yellow-900 background-color: #78350F;

to-green-50 background-color: #ECFDF5;

to-green-100 background-color: #D1FAE5;

to-green-200 background-color: #A7F3D0;

to-green-300 background-color: #6EE7B7;

to-green-400 background-color: #34D399;

to-green-500 background-color: #10B981;

to-green-600 background-color: #059669;

to-green-700 background-color: #047857;

to-green-800 background-color: #065F46;

to-green-900 background-color: #064E3B;

to-blue-50 background-color: #EFF6FF;

to-blue-100 background-color: #DBEAFE;

to-blue-200 background-color: #BFDBFE;

to-blue-300 background-color: #93C5FD;

to-blue-400 background-color: #60A5FA;

to-blue-500 background-color: #3B82F6;

to-blue-600 background-color: #2563EB;

to-blue-700 background-color: #1D4ED8;

to-blue-800 background-color: #1E40AF;

to-blue-900 background-color: #1E3A8A;

to-indigo-50 background-color: #EEF2FF;

to-indigo-100 background-color: #E0E7FF;

to-indigo-200 background-color: #C7D2FE;

to-indigo-300 background-color: #A5B4FC;

to-indigo-400 background-color: #818CF8;

to-indigo-500 background-color: #6366F1;

to-indigo-600 background-color: #4F46E5;

to-indigo-700 background-color: #4338CA;

to-indigo-800 background-color: #3730A3;

to-indigo-900 background-color: #312E81;

to-purple-50 background-color: #F5F3FF;

to-purple-100 background-color: #EDE9FE;

to-purple-200 background-color: #DDD6FE;

to-purple-300 background-color: #C4B5FD;

to-purple-400 background-color: #A78BFA;

 to-purple-500 background-color: #8B5CF6;

to-purple-600 background-color: #7C3AED;

to-purple-700 background-color: #6D28D9;

to-purple-800 background-color: #5B21B6;

to-purple-900 background-color: #4C1D95;

to-pink-50 background-color: #FDF2F8;

to-pink-100 background-color: #FCE7F3;

to-pink-200 background-color: #FBCFE8;

to-pink-300 background-color: #F9A8D4;

to-pink-400 background-color: #F472B6;

to-pink-500 background-color: #EC4899;

to-pink-600 background-color: #DB2777;

to-pink-700 background-color: #BE185D;

to-pink-800 background-color: #9D174D;

to-pink-900 background-color: #831843;

Transitions & Animation

Transition Property DOCS

Sets the CSS properties affected by transition animations.

transition-property: background-color, border-color, color,

transition
fill, stroke, opacity, box-shadow, transform;

transition-none transition-property: none;

transition-all transition-property: all;

transition-property: background-color, border-color, color,

transition-colors
fill, stroke;
 transition-opacity transition-property: opacity;

transition-shadow transition-property: box-shadow;

transition-transform transition-property: transform;

Transition Duration DOCS

Sets the length of time for a transition animations to complete.

duration-75 transition-duration: 75ms;

duration-100 transition-duration: 100ms;

duration-150 transition-duration: 150ms;

duration-200 transition-duration: 200ms;

duration-300 transition-duration: 300ms;

duration-500 transition-duration: 500ms;

duration-700 transition-duration: 700ms;

duration-1000 transition-duration: 1000ms;

Transition Timing Function DOCS

Sets the easing function of transition animations.

ease-linear transition-timing-function: linear;

ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Transition Delay DOCS

Sets the CSS properties affected by transition delay.

delay-75 transition-delay: 75ms;

delay-100 transition-delay: 100ms;

delay-150 transition-delay: 150ms;

delay-200 transition-delay: 200ms;

delay-300 transition-delay: 300ms;

 delay-500 transition-delay: 500ms;

delay-700 transition-delay: 700ms;

delay-1000 transition-delay: 1000ms;

Animation DOCS

Utilities for animating elements with CSS animations.

animate-none animation: none;

animation: spin 1s linear infinite; @keyframes spin { from {

animate-spin
transform: rotate(0deg); } to { transform: rotate(360deg); } }

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes

animate-ping
ping { 75%, 100% { transform: scale(2); opacity: 0; } }

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

animate-pulse
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

animation: animation: bounce 1s infinite; @keyframes bounce { 0%,

100% { transform: translateY(-25%); animationTimingFunction:
animate-bounce
cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0);
animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } }

Transforms

Scale DOCS

Scales an element that has transform applied.

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;

Rotate DOCS

Rotates an element that has transform applied.

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;

Translate DOCS

Translates an element that has transform applied.

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%;

Skew DOCS

Skews an element that has transform applied.

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-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;

Transform Origin DOCS

Sets the origin of an element's transforms. Think of the origin as pushing a thumbtack
into the element at the specified position.

origin-center transform-origin: center;

origin-top transform-origin: top;

origin-top-right transform-origin: top right;

origin-right transform-origin: right;

origin-bottom-right transform-origin: bottom right;

origin-bottom transform-origin: bottom;

origin-bottom-left transform-origin: bottom left;

origin-left transform-origin: left;

 origin-top-left transform-origin: top left;

Interactivity

Appearance DOCS

Disables native styling based on the operating system's theme.

appearance-none appearance: none;

Cursor DOCS

Changes the cursor when hovering over an element.

cursor-auto cursor: auto;

cursor-default cursor: default;

cursor-pointer cursor: pointer;

cursor-wait cursor: wait;

cursor-text cursor: text;

cursor-move cursor: move;

cursor-help cursor: help;

cursor-not-allowed cursor: not-allowed;

cursor-none cursor: none;

cursor-context-menu cursor: context-menu;

cursor-progress cursor: progress;

cursor-cell cursor: cell;

cursor-crosshair cursor: crosshair;

cursor-vertical-text cursor: vertical-text;

cursor-alias cursor: alias;

cursor-copy cursor: copy;

cursor-no-drop cursor: no-drop;

cursor-grab cursor: grab;

cursor-grabbing cursor: grabbing;

 cursor-all-scroll cursor: all-scroll;

cursor-col-resize cursor: col-resize;

cursor-row-resize cursor: row-resize;

cursor-n-resize cursor: n-resize;

cursor-e-resize cursor: e-resize;

cursor-s-resize cursor: s-resize;

cursor-w-resize cursor: w-resize;

cursor-ne-resize cursor: ne-resize;

cursor-nw-resize cursor: nw-resize;

cursor-se-resize cursor: se-resize;

cursor-sw-resize cursor: sw-resize;

cursor-ew-resize cursor: ew-resize;

cursor-ns-resize cursor: ns-resize;

cursor-nesw-resize cursor: nesw-resize;

cursor-nwse-resize cursor: nwse-resize;

cursor-zoom-in cursor: zoom-in;

cursor-zoom-out cursor: zoom-out;

Pointer Events DOCS

Specifies whether an element is the target of mouse events.

pointer-events-none pointer-events: none;

pointer-events-auto pointer-events: auto;

Resize DOCS

Sets whether an element is resizable, along with direction.

resize-none resize: none;

resize resize: both;

resize-y resize: vertical;

resize-x resize: horizontal;

Scroll Behavior DOCS

Utilities for controlling the scroll behavior of an element.

scroll-auto scroll-behavior: auto;

scroll-smooth scroll-behavior: smooth;

Scroll Margin DOCS

Utilities for controlling the scroll offset around items in a snap container.

scroll-m-0 scroll-margin: 0;

scroll-m-0.5 scroll-margin: 0.125rem; 2px

scroll-m-1 scroll-margin: 0.25rem; 4px

scroll-m-1.5 scroll-margin: 0.375rem; 6px

scroll-m-2 scroll-margin: 0.5rem; 8px

scroll-m-2.5 scroll-margin: 0.625rem; 10px

scroll-m-3 scroll-margin: 0.75rem; 12px

scroll-m-3.5 scroll-margin: 0.875rem; 14px

scroll-m-4 scroll-margin: 1rem; 16px

scroll-m-5 scroll-margin: 1.25rem; 20px

scroll-m-6 scroll-margin: 1.5rem; 24px

scroll-m-8 scroll-margin: 2rem; 32px

scroll-m-10 scroll-margin: 2.5rem; 40px

scroll-m-11 scroll-margin: 2.75rem; 44px

scroll-m-12 scroll-margin: 3rem; 48px

scroll-m-14 scroll-margin: 3.5rem; 56px

scroll-m-16 scroll-margin: 4rem; 64px

scroll-m-20 scroll-margin: 5rem; 80px

scroll-m-24 scroll-margin: 6rem; 96px

scroll-m-28 scroll-margin: 7rem; 112px

scroll-m-32 scroll-margin: 8rem; 128px

scroll-m-36 scroll-margin: 9rem; 144px

scroll-m-40 scroll-margin: 10rem; 160px

scroll-m-44 scroll-margin: 11rem; 176px

scroll-m-48 scroll-margin: 12rem; 192px

scroll-m-52 scroll-margin: 13rem; 208px

scroll-m-56 scroll-margin: 14rem; 224px

scroll-m-64 scroll-margin: 16rem; 256px

scroll-m-72 scroll-margin: 18rem; 288px

scroll-m-80 scroll-margin: 20rem; 320px

scroll-m-96 scroll-margin: 24rem; 384px

scroll-m-px scroll-margin: 1px;

scroll-my-0 scroll-margin-top: 0; scroll-margin-bottom: 0;

scroll-mx-0 scroll-margin-left: 0; scroll-margin-right: 0;

scroll-my-0.5 scroll-margin-top: 0.125rem; scroll-margin-bottom: 0.125rem; 2px

scroll-mx-0.5 scroll-margin-left: 0.125rem; scroll-margin-right: 0.125rem; 2px

scroll-my-1 scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem; 4px

scroll-mx-1 scroll-margin-left: 0.25rem; scroll-margin-right: 0.25rem; 4px

scroll-my-1.5 scroll-margin-top: 0.375rem; scroll-margin-bottom: 0.375rem; 6px

scroll-mx-1.5 scroll-margin-left: 0.375rem; scroll-margin-right: 0.375rem; 6px

scroll-my-2 scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem; 8px

scroll-mx-2 scroll-margin-left: 0.5rem; scroll-margin-right: 0.5rem; 8px

scroll-my-2.5 scroll-margin-top: 0.625rem; scroll-margin-bottom: 0.625rem; 10px

scroll-mx-2.5 scroll-margin-left: 0.625rem; scroll-margin-right: 0.625rem; 10px

scroll-my-3 scroll-margin-top: 0.75rem; scroll-margin-bottom: 0.75rem; 12px

scroll-mx-3 scroll-margin-left: 0.75rem; scroll-margin-right: 0.75rem; 12px

scroll-my-3.5 scroll-margin-top: 0.875rem; scroll-margin-bottom: 0.875rem; 14px

scroll-mx-3.5 scroll-margin-left: 0.875rem; scroll-margin-right: 0.875rem; 14px

scroll-my-4 scroll-margin-top: 1rem; scroll-margin-bottom: 1rem; 16px

scroll-mx-4 scroll-margin-left: 1rem; scroll-margin-right: 1rem; 16px

scroll-my-5 scroll-margin-top: 1.25rem; scroll-margin-bottom: 1.25rem; 20px

scroll-mx-5 scroll-margin-left: 1.25rem; scroll-margin-right: 1.25rem; 20px

scroll-my-6 scroll-margin-top: 1.5rem; scroll-margin-bottom: 1.5rem; 24px

scroll-mx-6 scroll-margin-left: 1.5rem; scroll-margin-right: 1.5rem; 24px

scroll-my-7 scroll-margin-top: 1.75rem; scroll-margin-bottom: 1.75rem; 24px

scroll-mx-7 scroll-margin-left: 1.75rem; scroll-margin-right: 1.75rem; 24px

scroll-my-8 scroll-margin-top: 2rem; scroll-margin-bottom: 2rem; 32px

scroll-mx-8 scroll-margin-left: 2rem; scroll-margin-right: 2rem; 32px

scroll-my-9 scroll-margin-top: 2.25rem; scroll-margin-bottom: 2.25rem; 36px

scroll-mx-9 scroll-margin-left: 2.25rem; scroll-margin-right: 2.25rem; 36px

scroll-my-10 scroll-margin-top: 2.5rem; scroll-margin-bottom: 2.5rem; 40px

scroll-mx-10 scroll-margin-left: 2.5rem; scroll-margin-right: 2.5rem; 40px

scroll-my-11 scroll-margin-top: 2.75rem; scroll-margin-bottom: 2.75rem; 44px

scroll-mx-11 scroll-margin-left: 2.75rem; scroll-margin-right: 2.75rem; 44px

scroll-my-12 scroll-margin-top: 3rem; scroll-margin-bottom: 3rem; 48px

scroll-mx-12 scroll-margin-left: 3rem; scroll-margin-right: 3rem; 48px

scroll-my-14 scroll-margin-top: 3.5rem; scroll-margin-bottom: 3.5rem; 56px

scroll-mx-14 scroll-margin-left: 3.5rem; scroll-margin-right: 3.5rem; 56px

scroll-my-16 scroll-margin-top: 4rem; scroll-margin-bottom: 4rem; 64px

scroll-mx-16 scroll-margin-left: 4rem; scroll-margin-right: 4rem; 64px

scroll-my-20 scroll-margin-top: 5rem; scroll-margin-bottom: 5rem; 80px

scroll-mx-20 scroll-margin-left: 5rem; scroll-margin-right: 5rem; 80px

scroll-my-24 scroll-margin-top: 6rem; scroll-margin-bottom: 6rem; 96px

scroll-mx-24 scroll-margin-left: 6rem; scroll-margin-right: 6rem; 96px

scroll-my-28 scroll-margin-top: 7rem; scroll-margin-bottom: 7rem; 112px

scroll-mx-28 scroll-margin-left: 7rem; scroll-margin-right: 7rem; 112px

scroll-my-32 scroll-margin-top: 8rem; scroll-margin-bottom: 8rem; 128px

scroll-mx-32 scroll-margin-left: 8rem; scroll-margin-right: 8rem; 128px

scroll-my-36 scroll-margin-top: 9rem; scroll-margin-bottom: 9rem; 144px

scroll-mx-36 scroll-margin-left: 9rem; scroll-margin-right: 9rem; 144px

scroll-my-40 scroll-margin-top: 10rem; scroll-margin-bottom: 10rem; 160px

scroll-mx-40 scroll-margin-left: 10rem; scroll-margin-right: 10rem; 160px

scroll-my-44 scroll-margin-top: 11rem; scroll-margin-bottom: 11rem; 176px

scroll-mx-44 scroll-margin-left: 11rem; scroll-margin-right: 11rem; 176px

scroll-my-48 scroll-margin-top: 12rem; scroll-margin-bottom: 12rem; 192px

scroll-mx-48 scroll-margin-left: 12rem; scroll-margin-right: 12rem; 192px

scroll-my-52 scroll-margin-top: 13rem; scroll-margin-bottom: 13rem; 208px

scroll-mx-52 scroll-margin-left: 13rem; scroll-margin-right: 13rem; 208px

scroll-my-56 scroll-margin-top: 14rem; scroll-margin-bottom: 14rem; 224px

scroll-mx-56 scroll-margin-left: 14rem; scroll-margin-right: 14rem; 224px

scroll-my-60 scroll-margin-top: 15rem; scroll-margin-bottom: 15rem; 240px

scroll-mx-60 scroll-margin-left: 15rem; scroll-margin-right: 15rem; 240px

scroll-my-64 scroll-margin-top: 16rem; scroll-margin-bottom: 16rem; 256px

scroll-mx-64 scroll-margin-left: 16rem; scroll-margin-right: 16rem; 256px

scroll-my-70 scroll-margin-top: 18rem; scroll-margin-bottom: 18rem; 280px

scroll-mx-70 scroll-margin-left: 18rem; scroll-margin-right: 18rem; 280px

scroll-my-80 scroll-margin-top: 20rem; scroll-margin-bottom: 20rem; 320px

scroll-mx-80 scroll-margin-left: 20rem; scroll-margin-right: 20rem; 320px

scroll-my-96 scroll-margin-top: 24rem; scroll-margin-bottom: 24rem; 384px

scroll-mx-96 scroll-margin-left: 24rem; scroll-margin-right: 24rem; 384px

scroll-my-px scroll-margin-top: 1px; scroll-margin-bottom: 1px;

scroll-mx-px scroll-margin-left: 1px; scroll-margin-right: 1px;

scroll-mt-0 scroll-margin-top: 0;

scroll-mr-0 scroll-margin-right: 0;

scroll-mb-0 scroll-margin-bottom: 0;

scroll-ml-0 scroll-margin-left: 0;

scroll-mt-0.5 scroll-margin-top: 0.125rem; 2px

scroll-mr-0.5 scroll-margin-right: 0.125rem; 2px

scroll-mb-0.5 scroll-margin-bottom: 0.125rem; 2px

scroll-ml-0.5 scroll-margin-left: 0.125rem; 2px

scroll-mt-1 scroll-margin-top: 0.25rem; 4px

scroll-mr-1 scroll-margin-right: 0.25rem; 4px

scroll-mb-1 scroll-margin-bottom: 0.25rem; 4px

scroll-ml-1 scroll-margin-left: 0.25rem; 4px

scroll-mt-1.5 scroll-margin-top: 0.375rem; 6px

scroll-mr-1.5 scroll-margin-right: 0.375rem; 6px

scroll-mb-1.5 scroll-margin-bottom: 0.375rem; 6px

scroll-ml-1.5 scroll-margin-left: 0.375rem; 6px

scroll-mt-2 scroll-margin-top: 0.5rem; 8px

scroll-mr-2 scroll-margin-right: 0.5rem; 8px

scroll-mb-2 scroll-margin-bottom: 0.5rem; 8px

scroll-ml-2 scroll-margin-left: 0.5rem; 8px

scroll-mt-2.5 scroll-margin-top: 0.625rem; 10px

scroll-mr-2.5 scroll-margin-right: 0.625rem; 10px

scroll-mb-2.5 scroll-margin-bottom: 0.625rem; 10px

scroll-ml-2.5 scroll-margin-left: 0.625rem; 10px

scroll-mt-3 scroll-margin-top: 0.75rem; 12px

scroll-mr-3 scroll-margin-right: 0.75rem; 12px

scroll-mb-3 scroll-margin-bottom: 0.75rem; 12px

scroll-ml-3 scroll-margin-left: 0.75rem; 12px

scroll-mt-3.5 scroll-margin-top: 0.875rem; 14px

scroll-mr-3.5 scroll-margin-right: 0.875rem; 14px

scroll-mb-3.5 scroll-margin-bottom: 0.875rem; 14px

scroll-ml-3.5 scroll-margin-left: 0.875rem; 14px

scroll-mt-4 scroll-margin-top: 1rem; 16px

scroll-mr-4 scroll-margin-right: 1rem; 16px

scroll-mb-4 scroll-margin-bottom: 1rem; 16px

scroll-ml-4 scroll-margin-left: 1rem; 16px

scroll-mt-5 scroll-margin-top: 1.25rem; 20px

scroll-mr-5 scroll-margin-right: 1.25rem; 20px

scroll-mb-5 scroll-margin-bottom: 1.25rem; 20px

scroll-ml-5 scroll-margin-left: 1.25rem; 20px

scroll-mt-6 scroll-margin-top: 1.5rem; 24px

scroll-mr-6 scroll-margin-right: 1.5rem; 24px

scroll-mb-6 scroll-margin-bottom: 1.5rem; 24px

scroll-ml-6 scroll-margin-left: 1.5rem; 24px

scroll-mt-7 scroll-margin-top: 1.75rem; 28px

scroll-mr-7 scroll-margin-right: 1.75rem; 28px

scroll-mb-7 scroll-margin-bottom: 1.75rem; 28px

scroll-ml-7 scroll-margin-left: 1.75rem; 28px

scroll-mt-8 scroll-margin-top: 2rem; 32px

scroll-mr-8 scroll-margin-right: 2rem; 32px

scroll-mb-8 scroll-margin-bottom: 2rem; 32px

scroll-ml-8 scroll-margin-left: 2rem; 32px

scroll-mt-9 scroll-margin-top: 2.25rem; 36px

scroll-mr-9 scroll-margin-right: 2.25rem; 36px

scroll-mb-9 scroll-margin-bottom: 2.25rem; 36px

scroll-ml-9 scroll-margin-left: 2.25rem; 36px

scroll-mt-10 scroll-margin-top: 2.5rem; 40px

scroll-mr-10 scroll-margin-right: 2.5rem; 40px

scroll-mb-10 scroll-margin-bottom: 2.5rem; 40px

scroll-ml-10 scroll-margin-left: 2.5rem; 40px

scroll-mt-11 scroll-margin-top: 2.75rem; 44px

scroll-mr-11 scroll-margin-right: 2.75rem; 44px

scroll-mb-11 scroll-margin-bottom: 2.75rem; 44px

scroll-ml-11 scroll-margin-left: 2.75rem; 44px

scroll-mt-12 scroll-margin-top: 3rem; 48px

scroll-mr-12 scroll-margin-right: 3rem; 48px

scroll-mb-12 scroll-margin-bottom: 3rem; 48px

scroll-ml-12 scroll-margin-left: 3rem; 48px

scroll-mt-14 scroll-margin-top: 3.5rem; 56px

scroll-mr-14 scroll-margin-right: 3.5rem; 56px

scroll-mb-14 scroll-margin-bottom: 3.5rem; 56px

scroll-ml-14 scroll-margin-left: 3.5rem; 56px

scroll-mt-16 scroll-margin-top: 4rem; 64px

scroll-mr-16 scroll-margin-right: 4rem; 64px

scroll-mb-16 scroll-margin-bottom: 4rem; 64px

scroll-ml-16 scroll-margin-left: 4rem; 64px

scroll-mt-20 scroll-margin-top: 5rem; 80px

scroll-mr-20 scroll-margin-right: 5rem; 80px

scroll-mb-20 scroll-margin-bottom: 5rem; 80px

scroll-ml-20 scroll-margin-left: 5rem; 80px

scroll-mt-24 scroll-margin-top: 6rem; 96px

scroll-mr-24 scroll-margin-right: 6rem; 96px

scroll-mb-24 scroll-margin-bottom: 6rem; 96px

scroll-ml-24 scroll-margin-left: 6rem; 96px

scroll-mt-28 scroll-margin-top: 7rem; 112px

scroll-mr-28 scroll-margin-right: 7rem; 112px

scroll-mb-28 scroll-margin-bottom: 7rem; 112px

scroll-ml-28 scroll-margin-left: 7rem; 112px

scroll-mt-32 scroll-margin-top: 8rem; 128px

scroll-mr-32 scroll-margin-right: 8rem; 128px

scroll-mb-32 scroll-margin-bottom: 8rem; 128px

scroll-ml-32 scroll-margin-left: 8rem; 128px

scroll-mt-36 scroll-margin-top: 9rem; 144px

scroll-mr-36 scroll-margin-right: 9rem; 144px

scroll-mb-36 scroll-margin-bottom: 9rem; 144px

scroll-ml-36 scroll-margin-left: 9rem; 144px

scroll-mt-40 scroll-margin-top: 10rem; 160px

scroll-mr-40 scroll-margin-right: 10rem; 160px

scroll-mb-40 scroll-margin-bottom: 10rem; 160px

scroll-ml-40 scroll-margin-left: 10rem; 160px

scroll-mt-44 scroll-margin-top: 11rem; 176px

scroll-mr-44 scroll-margin-right: 11rem; 176px

scroll-mb-44 scroll-margin-bottom: 11rem; 176px

scroll-ml-44 scroll-margin-left: 11rem; 176px

scroll-mt-48 scroll-margin-top: 12rem; 192px

scroll-mr-48 scroll-margin-right: 12rem; 192px

scroll-mb-48 scroll-margin-bottom: 12rem; 192px

scroll-ml-48 scroll-margin-left: 12rem; 192px

scroll-mt-52 scroll-margin-top: 13rem; 208px

scroll-mr-52 scroll-margin-right: 13rem; 208px

scroll-mb-52 scroll-margin-bottom: 13rem; 208px

scroll-ml-52 scroll-margin-left: 13rem; 208px

scroll-mt-56 scroll-margin-top: 14rem; 224px

scroll-mr-56 scroll-margin-right: 14rem; 224px

scroll-mb-56 scroll-margin-bottom: 14rem; 224px

scroll-ml-56 scroll-margin-left: 14rem; 224px

scroll-mt-60 scroll-margin-top: 15rem; 240px

scroll-mr-60 scroll-margin-right: 15rem; 240px

scroll-mb-60 scroll-margin-bottom: 15rem; 240px

scroll-ml-60 scroll-margin-left: 15rem; 240px

scroll-mt-64 scroll-margin-top: 16rem; 256px

scroll-mr-64 scroll-margin-right: 16rem; 256px

scroll-mb-64 scroll-margin-bottom: 16rem; 256px

 scroll-ml-64 scroll-margin-left: 16rem; 256px

scroll-mt-72 scroll-margin-top: 18rem; 288px

scroll-mr-72 scroll-margin-right: 18rem; 288px

scroll-mb-72 scroll-margin-bottom: 18rem; 288px

scroll-ml-72 scroll-margin-left: 18rem; 288px

scroll-mt-80 scroll-margin-top: 20rem; 320px

scroll-mr-80 scroll-margin-right: 20rem; 320px

scroll-mb-80 scroll-margin-bottom: 20rem; 320px

scroll-ml-80 scroll-margin-left: 20rem; 320px

scroll-mt-96 scroll-margin-top: 24rem; 384px

scroll-mr-96 scroll-margin-right: 24rem; 384px

scroll-mb-96 scroll-margin-bottom: 24rem; 384px

scroll-ml-96 scroll-margin-left: 24rem; 384px

scroll-mt-px scroll-margin-top: 1px;

scroll-mr-px scroll-margin-right: 1px;

scroll-mb-px scroll-margin-bottom: 1px;

scroll-ml-px scroll-margin-left: 1px;

Scroll Padding DOCS

Utilities for controlling an element's scroll offset within a snap container.

scroll-p-0 scroll-padding: 0;

scroll-p-0.5 scroll-padding: 0.125rem; 2px

scroll-p-1 scroll-padding: 0.25rem; 4px

scroll-p-1.5 scroll-padding: 0.375rem; 6px

scroll-p-2 scroll-padding: 0.5rem; 8px

scroll-p-2.5 scroll-padding: 0.625rem; 10px

scroll-p-3 scroll-padding: 0.75rem; 12px

scroll-p-3.5 scroll-padding: 0.875rem; 14px

scroll-p-4 scroll-padding: 1rem; 16px

scroll-p-5 scroll-padding: 1.25rem; 20px

scroll-p-6 scroll-padding: 1.5rem; 24px

scroll-p-8 scroll-padding: 2rem; 32px

scroll-p-10 scroll-padding: 2.5rem; 40px

scroll-p-11 scroll-padding: 2.75rem; 44px

scroll-p-12 scroll-padding: 3rem; 48px

scroll-p-14 scroll-padding: 3.5rem; 56px

scroll-p-16 scroll-padding: 4rem; 64px

scroll-p-20 scroll-padding: 5rem; 80px

scroll-p-24 scroll-padding: 6rem; 96px

scroll-p-28 scroll-padding: 7rem; 112px

scroll-p-32 scroll-padding: 8rem; 128px

scroll-p-36 scroll-padding: 9rem; 144px

scroll-p-40 scroll-padding: 10rem; 160px

scroll-p-44 scroll-padding: 11rem; 176px

scroll-p-48 scroll-padding: 12rem; 192px

scroll-p-52 scroll-padding: 13rem; 208px

scroll-p-56 scroll-padding: 14rem; 224px

scroll-p-64 scroll-padding: 16rem; 256px

scroll-p-72 scroll-padding: 18rem; 288px

scroll-p-80 scroll-padding: 20rem; 320px

scroll-p-96 scroll-padding: 24rem; 384px

scroll-p-px scroll-padding: 1px;

scroll-py-0 scroll-padding-top: 0; scroll-padding-bottom: 0;

scroll-px-0 scroll-padding-left: 0; scroll-padding-right: 0;

scroll-py-0.5 scroll-padding-top: 0.125rem; scroll-padding-bottom: 0.125rem; 2px

scroll-px-0.5 scroll-padding-left: 0.125rem; scroll-padding-right: 0.125rem; 2px

scroll-py-1 scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem; 4px

scroll-px-1 scroll-padding-left: 0.25rem; scroll-padding-right: 0.25rem; 4px

scroll-py-1.5 scroll-padding-top: 0.375rem; scroll-padding-bottom: 0.375rem; 6px

scroll-px-1.5 scroll-padding-left: 0.375rem; scroll-padding-right: 0.375rem; 6px

scroll-py-2 scroll-padding-top: 0.5rem; scroll-padding-bottom: 0.5rem; 8px

scroll-px-2 scroll-padding-left: 0.5rem; scroll-padding-right: 0.5rem; 8px

scroll-py-2.5 scroll-padding-top: 0.625rem; scroll-padding-bottom: 0.625rem; 10px

scroll-px-2.5 scroll-padding-left: 0.625rem; scroll-padding-right: 0.625rem; 10px

scroll-py-3 scroll-padding-top: 0.75rem; scroll-padding-bottom: 0.75rem; 12px

scroll-px-3 scroll-padding-left: 0.75rem; scroll-padding-right: 0.75rem; 12px

scroll-py-3.5 scroll-padding-top: 0.875rem; scroll-padding-bottom: 0.875rem; 14px

scroll-px-3.5 scroll-padding-left: 0.875rem; scroll-padding-right: 0.875rem; 14px

scroll-py-4 scroll-padding-top: 1rem; scroll-padding-bottom: 1rem; 16px

scroll-px-4 scroll-padding-left: 1rem; scroll-padding-right: 1rem; 16px

scroll-py-5 scroll-padding-top: 1.25rem; scroll-padding-bottom: 1.25rem; 20px

scroll-px-5 scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem; 20px

scroll-py-6 scroll-padding-top: 1.5rem; scroll-padding-bottom: 1.5rem; 24px

scroll-px-6 scroll-padding-left: 1.5rem; scroll-padding-right: 1.5rem; 24px

scroll-py-7 scroll-padding-top: 1.75rem; scroll-padding-bottom: 1.75rem; 24px

scroll-px-7 scroll-padding-left: 1.75rem; scroll-padding-right: 1.75rem; 24px

scroll-py-8 scroll-padding-top: 2rem; scroll-padding-bottom: 2rem; 32px

scroll-px-8 scroll-padding-left: 2rem; scroll-padding-right: 2rem; 32px

scroll-py-9 scroll-padding-top: 2.25rem; scroll-padding-bottom: 2.25rem; 36px

scroll-px-9 scroll-padding-left: 2.25rem; scroll-padding-right: 2.25rem; 36px

scroll-py-10 scroll-padding-top: 2.5rem; scroll-padding-bottom: 2.5rem; 40px

scroll-px-10 scroll-padding-left: 2.5rem; scroll-padding-right: 2.5rem; 40px

scroll-py-11 scroll-padding-top: 2.75rem; scroll-padding-bottom: 2.75rem; 44px

scroll-px-11 scroll-padding-left: 2.75rem; scroll-padding-right: 2.75rem; 44px

scroll-py-12 scroll-padding-top: 3rem; scroll-padding-bottom: 3rem; 48px

scroll-px-12 scroll-padding-left: 3rem; scroll-padding-right: 3rem; 48px

scroll-py-14 scroll-padding-top: 3.5rem; scroll-padding-bottom: 3.5rem; 56px

scroll-px-14 scroll-padding-left: 3.5rem; scroll-padding-right: 3.5rem; 56px

scroll-py-16 scroll-padding-top: 4rem; scroll-padding-bottom: 4rem; 64px

scroll-px-16 scroll-padding-left: 4rem; scroll-padding-right: 4rem; 64px

scroll-py-20 scroll-padding-top: 5rem; scroll-padding-bottom: 5rem; 80px

scroll-px-20 scroll-padding-left: 5rem; scroll-padding-right: 5rem; 80px

scroll-py-24 scroll-padding-top: 6rem; scroll-padding-bottom: 6rem; 96px

scroll-px-24 scroll-padding-left: 6rem; scroll-padding-right: 6rem; 96px

scroll-py-28 scroll-padding-top: 7rem; scroll-padding-bottom: 7rem; 112px

scroll-px-28 scroll-padding-left: 7rem; scroll-padding-right: 7rem; 112px

scroll-py-32 scroll-padding-top: 8rem; scroll-padding-bottom: 8rem; 128px

scroll-px-32 scroll-padding-left: 8rem; scroll-padding-right: 8rem; 128px

scroll-py-36 scroll-padding-top: 9rem; scroll-padding-bottom: 9rem; 144px

scroll-px-36 scroll-padding-left: 9rem; scroll-padding-right: 9rem; 144px

scroll-py-40 scroll-padding-top: 10rem; scroll-padding-bottom: 10rem; 160px

scroll-px-40 scroll-padding-left: 10rem; scroll-padding-right: 10rem; 160px

scroll-py-44 scroll-padding-top: 11rem; scroll-padding-bottom: 11rem; 176px

scroll-px-44 scroll-padding-left: 11rem; scroll-padding-right: 11rem; 176px

scroll-py-48 scroll-padding-top: 12rem; scroll-padding-bottom: 12rem; 192px

scroll-px-48 scroll-padding-left: 12rem; scroll-padding-right: 12rem; 192px

scroll-py-52 scroll-padding-top: 13rem; scroll-padding-bottom: 13rem; 208px

scroll-px-52 scroll-padding-left: 13rem; scroll-padding-right: 13rem; 208px

scroll-py-56 scroll-padding-top: 14rem; scroll-padding-bottom: 14rem; 224px

scroll-px-56 scroll-padding-left: 14rem; scroll-padding-right: 14rem; 224px

scroll-py-60 scroll-padding-top: 15rem; scroll-padding-bottom: 15rem; 240px

scroll-px-60 scroll-padding-left: 15rem; scroll-padding-right: 15rem; 240px

scroll-py-64 scroll-padding-top: 16rem; scroll-padding-bottom: 16rem; 256px

scroll-px-64 scroll-padding-left: 16rem; scroll-padding-right: 16rem; 256px

scroll-py-70 scroll-padding-top: 18rem; scroll-padding-bottom: 18rem; 280px

scroll-px-70 scroll-padding-left: 18rem; scroll-padding-right: 18rem; 280px

scroll-py-80 scroll-padding-top: 20rem; scroll-padding-bottom: 20rem; 320px

scroll-px-80 scroll-padding-left: 20rem; scroll-padding-right: 20rem; 320px

scroll-py-96 scroll-padding-top: 24rem; scroll-padding-bottom: 24rem; 384px

scroll-px-96 scroll-padding-left: 24rem; scroll-padding-right: 24rem; 384px

scroll-py-px scroll-padding-top: 1px; scroll-padding-bottom: 1px;

scroll-px-px scroll-padding-left: 1px; scroll-padding-right: 1px;

scroll-pt-0 scroll-padding-top: 0;

scroll-pr-0 scroll-padding-right: 0;

scroll-pb-0 scroll-padding-bottom: 0;

scroll-pl-0 scroll-padding-left: 0;

scroll-pt-0.5 scroll-padding-top: 0.125rem; 2px

scroll-pr-0.5 scroll-padding-right: 0.125rem; 2px

scroll-pb-0.5 scroll-padding-bottom: 0.125rem; 2px

scroll-pl-0.5 scroll-padding-left: 0.125rem; 2px

scroll-pt-1 scroll-padding-top: 0.25rem; 4px

scroll-pr-1 scroll-padding-right: 0.25rem; 4px

scroll-pb-1 scroll-padding-bottom: 0.25rem; 4px

scroll-pl-1 scroll-padding-left: 0.25rem; 4px

scroll-pt-1.5 scroll-padding-top: 0.375rem; 6px

scroll-pr-1.5 scroll-padding-right: 0.375rem; 6px

scroll-pb-1.5 scroll-padding-bottom: 0.375rem; 6px

scroll-pl-1.5 scroll-padding-left: 0.375rem; 6px

scroll-pt-2 scroll-padding-top: 0.5rem; 8px

scroll-pr-2 scroll-padding-right: 0.5rem; 8px

scroll-pb-2 scroll-padding-bottom: 0.5rem; 8px

scroll-pl-2 scroll-padding-left: 0.5rem; 8px

scroll-pt-2.5 scroll-padding-top: 0.625rem; 10px

scroll-pr-2.5 scroll-padding-right: 0.625rem; 10px

scroll-pb-2.5 scroll-padding-bottom: 0.625rem; 10px

scroll-pl-2.5 scroll-padding-left: 0.625rem; 10px

scroll-pt-3 scroll-padding-top: 0.75rem; 12px

scroll-pr-3 scroll-padding-right: 0.75rem; 12px

scroll-pb-3 scroll-padding-bottom: 0.75rem; 12px

scroll-pl-3 scroll-padding-left: 0.75rem; 12px

scroll-pt-3.5 scroll-padding-top: 0.875rem; 14px

scroll-pr-3.5 scroll-padding-right: 0.875rem; 14px

scroll-pb-3.5 scroll-padding-bottom: 0.875rem; 14px

scroll-pl-3.5 scroll-padding-left: 0.875rem; 14px

scroll-pt-4 scroll-padding-top: 1rem; 16px

scroll-pr-4 scroll-padding-right: 1rem; 16px

scroll-pb-4 scroll-padding-bottom: 1rem; 16px

scroll-pl-4 scroll-padding-left: 1rem; 16px

scroll-pt-5 scroll-padding-top: 1.25rem; 20px

scroll-pr-5 scroll-padding-right: 1.25rem; 20px

scroll-pb-5 scroll-padding-bottom: 1.25rem; 20px

scroll-pl-5 scroll-padding-left: 1.25rem; 20px

scroll-pt-6 scroll-padding-top: 1.5rem; 24px

scroll-pr-6 scroll-padding-right: 1.5rem; 24px

scroll-pb-6 scroll-padding-bottom: 1.5rem; 24px

scroll-pl-6 scroll-padding-left: 1.5rem; 24px

scroll-pt-7 scroll-padding-top: 1.75rem; 28px

scroll-pr-7 scroll-padding-right: 1.75rem; 28px

scroll-pb-7 scroll-padding-bottom: 1.75rem; 28px

scroll-pl-7 scroll-padding-left: 1.75rem; 28px

scroll-pt-8 scroll-padding-top: 2rem; 32px

scroll-pr-8 scroll-padding-right: 2rem; 32px

scroll-pb-8 scroll-padding-bottom: 2rem; 32px

scroll-pl-8 scroll-padding-left: 2rem; 32px

scroll-pt-9 scroll-padding-top: 2.25rem; 36px

scroll-pr-9 scroll-padding-right: 2.25rem; 36px

scroll-pb-9 scroll-padding-bottom: 2.25rem; 36px

scroll-pl-9 scroll-padding-left: 2.25rem; 36px

scroll-pt-10 scroll-padding-top: 2.5rem; 40px

scroll-pr-10 scroll-padding-right: 2.5rem; 40px

scroll-pb-10 scroll-padding-bottom: 2.5rem; 40px

scroll-pl-10 scroll-padding-left: 2.5rem; 40px

scroll-pt-11 scroll-padding-top: 2.75rem; 44px

scroll-pr-11 scroll-padding-right: 2.75rem; 44px

scroll-pb-11 scroll-padding-bottom: 2.75rem; 44px

scroll-pl-11 scroll-padding-left: 2.75rem; 44px

scroll-pt-12 scroll-padding-top: 3rem; 48px

scroll-pr-12 scroll-padding-right: 3rem; 48px

scroll-pb-12 scroll-padding-bottom: 3rem; 48px

scroll-pl-12 scroll-padding-left: 3rem; 48px

scroll-pt-14 scroll-padding-top: 3.5rem; 56px

scroll-pr-14 scroll-padding-right: 3.5rem; 56px

scroll-pb-14 scroll-padding-bottom: 3.5rem; 56px

scroll-pl-14 scroll-padding-left: 3.5rem; 56px

scroll-pt-16 scroll-padding-top: 4rem; 64px

scroll-pr-16 scroll-padding-right: 4rem; 64px

scroll-pb-16 scroll-padding-bottom: 4rem; 64px

scroll-pl-16 scroll-padding-left: 4rem; 64px

scroll-pt-20 scroll-padding-top: 5rem; 80px

scroll-pr-20 scroll-padding-right: 5rem; 80px

scroll-pb-20 scroll-padding-bottom: 5rem; 80px

scroll-pl-20 scroll-padding-left: 5rem; 80px

scroll-pt-24 scroll-padding-top: 6rem; 96px

scroll-pr-24 scroll-padding-right: 6rem; 96px

scroll-pb-24 scroll-padding-bottom: 6rem; 96px

scroll-pl-24 scroll-padding-left: 6rem; 96px

scroll-pt-28 scroll-padding-top: 7rem; 112px

scroll-pr-28 scroll-padding-right: 7rem; 112px

scroll-pb-28 scroll-padding-bottom: 7rem; 112px

scroll-pl-28 scroll-padding-left: 7rem; 112px

scroll-pt-32 scroll-padding-top: 8rem; 128px

scroll-pr-32 scroll-padding-right: 8rem; 128px

scroll-pb-32 scroll-padding-bottom: 8rem; 128px

scroll-pl-32 scroll-padding-left: 8rem; 128px

scroll-pt-36 scroll-padding-top: 9rem; 144px

scroll-pr-36 scroll-padding-right: 9rem; 144px

scroll-pb-36 scroll-padding-bottom: 9rem; 144px

scroll-pl-36 scroll-padding-left: 9rem; 144px

scroll-pt-40 scroll-padding-top: 10rem; 160px

scroll-pr-40 scroll-padding-right: 10rem; 160px

scroll-pb-40 scroll-padding-bottom: 10rem; 160px

scroll-pl-40 scroll-padding-left: 10rem; 160px

scroll-pt-44 scroll-padding-top: 11rem; 176px

scroll-pr-44 scroll-padding-right: 11rem; 176px

scroll-pb-44 scroll-padding-bottom: 11rem; 176px

scroll-pl-44 scroll-padding-left: 11rem; 176px

scroll-pt-48 scroll-padding-top: 12rem; 192px

scroll-pr-48 scroll-padding-right: 12rem; 192px

scroll-pb-48 scroll-padding-bottom: 12rem; 192px

scroll-pl-48 scroll-padding-left: 12rem; 192px

scroll-pt-52 scroll-padding-top: 13rem; 208px

scroll-pr-52 scroll-padding-right: 13rem; 208px

scroll-pb-52 scroll-padding-bottom: 13rem; 208px

scroll-pl-52 scroll-padding-left: 13rem; 208px

scroll-pt-56 scroll-padding-top: 14rem; 224px

scroll-pr-56 scroll-padding-right: 14rem; 224px

scroll-pb-56 scroll-padding-bottom: 14rem; 224px

scroll-pl-56 scroll-padding-left: 14rem; 224px

scroll-pt-60 scroll-padding-top: 15rem; 240px

scroll-pr-60 scroll-padding-right: 15rem; 240px

scroll-pb-60 scroll-padding-bottom: 15rem; 240px

scroll-pl-60 scroll-padding-left: 15rem; 240px

scroll-pt-64 scroll-padding-top: 16rem; 256px

scroll-pr-64 scroll-padding-right: 16rem; 256px

scroll-pb-64 scroll-padding-bottom: 16rem; 256px

scroll-pl-64 scroll-padding-left: 16rem; 256px

scroll-pt-72 scroll-padding-top: 18rem; 288px

scroll-pr-72 scroll-padding-right: 18rem; 288px

scroll-pb-72 scroll-padding-bottom: 18rem; 288px

scroll-pl-72 scroll-padding-left: 18rem; 288px

scroll-pt-80 scroll-padding-top: 20rem; 320px

scroll-pr-80 scroll-padding-right: 20rem; 320px

scroll-pb-80 scroll-padding-bottom: 20rem; 320px

scroll-pl-80 scroll-padding-left: 20rem; 320px

scroll-pt-96 scroll-padding-top: 24rem; 384px

scroll-pr-96 scroll-padding-right: 24rem; 384px

scroll-pb-96 scroll-padding-bottom: 24rem; 384px

scroll-pl-96 scroll-padding-left: 24rem; 384px

scroll-pt-px scroll-padding-top: 1px;

scroll-pr-px scroll-padding-right: 1px;

scroll-pb-px scroll-padding-bottom: 1px;

 scroll-pl-px scroll-padding-left: 1px;

Scroll Snap Align DOCS

Utilities for controlling the scroll snap alignment of an element.

snap-start scroll-snap-align: start;

snap-end scroll-snap-align: end;

snap-center scroll-snap-align: center;

snap-align-none scroll-snap-align: align-none;

Scroll Snap Stop DOCS

Utilities for controlling whether you can skip past possible snap positions..

snap-normal scroll-snap-stop: normal;

snap-always scroll-snap-stop: always;

Scroll Snap Type DOCS

Utilities for controlling how strictly snap points are enforced in a snap container.

snap-none scroll-snap-type: none;

snap-x scroll-snap-type: x var(--tw-scroll-snap-strictness);

snap-y scroll-snap-type: y var(--tw-scroll-snap-strictness);

snap-both scroll-snap-type: both var(--tw-scroll-snap-strictness);

snap-mandatory --tw-scroll-snap-strictness: mandatory;

snap-proximity --tw-scroll-snap-strictness: proximity;

Touch Action DOCS

Utilities for controlling how an element can be scrolled and zoomed on touchscreens.

touch-auto touch-action: auto;

touch-none touch-action: none;

touch-pan-x touch-action: pan-x;

touch-pan-left touch-action: pan-left;

 touch-pan-right touch-action: pan-right;

touch-pan-y touch-action: pan-y;

touch-pan-up touch-action: pan-up;

touch-pan-down touch-action: pan-down;

touch-pinch-zoom touch-action: pinch-zoom;

touch-manipulation touch-action: manipulation;

User Select DOCS

Controls whether the user can select text.

select-none user-select: none;

select-text user-select: text;

select-all user-select: all;

select-auto user-select: auto;

Will Change DOCS

Utilities for optimizing upcoming animations of elements that are expected to change.

will-change-auto will-change: auto;

will-change-scroll will-change: scroll-position;

will-change-contents will-change: contents;

will-change-transform will-change: transform;

SVG

Fill DOCS

Utilities for styling the fill of SVG elements.

fill-current fill: currentColor;

Stroke DOCS

Utilities for styling the stroke of SVG elements.

 stroke-current stroke: currentColor;

Stroke Width DOCS

Utilities for styling the stroke width of SVG elements.

stroke-0 stroke-width: 0;

stroke-1 stroke-width: 1;

stroke-2 stroke-width: 2;

Tables

Border Collapse DOCS

Collapse or separate table borders.

border-collapse border-collapse: collapse;

border-separate border-collapse: separate;

Table Layout DOCS

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

table-auto table-layout: auto;

table-fixed table-layout: fixed;

Effects

Box Shadow DOCS

shadow-xs box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);

shadow-sm box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0,

shadow
0, 0.06);

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px

shadow-md
rgba(0, 0, 0, 0.06);

shadow-lg box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px
 rgba(0, 0, 0, 0.05);

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px

shadow-xl
rgba(0, 0, 0, 0.04);

shadow-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

shadow-inner box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

shadow-outline box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

shadow-none box-shadow: none;

Opacity DOCS

opacity-0 opacity: 0;

opacity-5 opacity: 0.05;

opacity-10 opacity: 0.1;

opacity-20 opacity: 0.2;

opacity-25 opacity: 0.25;

opacity-30 opacity: 0.3;

opacity-40 opacity: 0.4;

opacity-50 opacity: 0.5;

opacity-60 opacity: 0.6;

opacity-70 opacity: 0.7;

opacity-75 opacity: 0.75;

opacity-80 opacity: 0.8;

opacity-90 opacity: 0.9;

opacity-100 opacity: 1;

Mix Blend Mode DOCS

Utilities for controlling how an element should blend with the background.

mix-blend-normal mix-blend-mode: normal;

mix-blend-multiply mix-blend-mode: multiply;

mix-blend-screen mix-blend-mode: screen;

mix-blend-overlay mix-blend-mode: overlay;

 mix-blend-darken mix-blend-mode: darken;

mix-blend-lighten mix-blend-mode: lighten;

mix-blend-color-dodge mix-blend-mode: color-dodge;

mix-blend-color-burn mix-blend-mode: color-burn;

mix-blend-hard-light mix-blend-mode: hard-light;

mix-blend-soft-light mix-blend-mode: soft-light;

mix-blend-difference mix-blend-mode: difference;

mix-blend-exclusion mix-blend-mode: exclusion;

mix-blend-hue mix-blend-mode: hue;

mix-blend-saturation mix-blend-mode: saturation;

mix-blend-color mix-blend-mode: color;

mix-blend-luminosity mix-blend-mode: luminosity;

Background Blend Mode DOCS

Utilities for controlling how an element's background image should blend with its
background color.

bg-blend-normal background-blend-mode: normal;

bg-blend-multiply background-blend-mode: multiply;

bg-blend-screen background-blend-mode: screen;

bg-blend-overlay background-blend-mode: overlay;

bg-blend-darken background-blend-mode: darken;

bg-blend-lighten background-blend-mode: lighten;

bg-blend-color-dodge background-blend-mode: color-dodge;

bg-blend-color-burn background-blend-mode: color-burn;

bg-blend-hard-light background-blend-mode: hard-light;

bg-blend-soft-light background-blend-mode: soft-light;

bg-blend-difference background-blend-mode: difference;

bg-blend-exclusion background-blend-mode: exclusion;

bg-blend-hue background-blend-mode: hue;

bg-blend-saturation background-blend-mode: saturation;

 bg-blend-color background-blend-mode: color;

bg-blend-luminosity background-blend-mode: luminosity;

Filters

Blur DOCS

Utilities for applying blur filters to an element.

blur-none blur: blur(0);

blur-sm blur: blur(4px);

blur blur: blur(8px);

blur-md blur: blur(12px);

blur-lg blur: blur(16px);

blur-xl blur: blur(24px);

blur-2xl blur: blur(40px);

blur-3xl blur: blur(64px);

Brightness DOCS

Utilities for applying brightness filters to an element.

brightness-0 brightness: brightness(0);

brightness-50 brightness: brightness(.5);

brightness-75 brightness: brightness(.75);

brightness-90 brightness: brightness(.9);

brightness-95 brightness: brightness(.95);

brightness-100 brightness: brightness(1);

brightness-105 brightness: brightness(1.05);

brightness-110 brightness: brightness(1.1);

brightness-125 brightness: brightness(1.25);

brightness-150 brightness: brightness(1.5);

brightness-200 brightness: brightness(2);

Contrast DOCS

Utilities for applying contrast filters to an element.

contrast-0 contrast: contrast(0);

contrast-50 contrast: contrast(.5);

contrast-75 contrast: contrast(.75);

contrast-100 contrast: contrast(1);

contrast-125 contrast: contrast(1.25);

contrast-150 contrast: contrast(1.5);

contrast-200 contrast: contrast(2);

Drop Shadow DOCS

Utilities for applying drop-shadow filters to an element.

drop-shadow-sm drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));

drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-

drop-shadow
shadow(0 1px 1px rgba(0, 0, 0, 0.06));

drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-

drop-shadow-md
shadow(0 2px 2px rgba(0, 0, 0, 0.06));

drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-

drop-shadow-lg
shadow(0 4px 3px rgba(0, 0, 0, 0.1));

drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-

drop-shadow-xl
shadow(0 8px 5px rgba(0, 0, 0, 0.08));

drop-shadow: drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0,

drop-shadow-2xl
0.15));

drop-shadow-none drop-shadow: drop-shadow: drop-shadow(0 0 #0000);

Grayscale DOCS

Utilities for applying grayscale filters to an element.

grayscale-0 grayscale: grayscale(0);

grayscale grayscale: grayscale(1);

Hue Rotate DOCS

Utilities for applying hue-rotate filters to an element.

 hue-rotate-0 hue-rotate: hue-rotate(0deg);

hue-rotate-15 hue-rotate: hue-rotate(15deg);

hue-rotate-30 hue-rotate: hue-rotate(30deg);

hue-rotate-60 hue-rotate: hue-rotate(60deg);

hue-rotate-90 hue-rotate: hue-rotate(90deg);

hue-rotate-180 hue-rotate: hue-rotate(180deg);

Invert DOCS

Utilities for applying invert filters to an element.

invert-0 invert: invert(0);

invert invert: invert(1);

Saturate DOCS

Utilities for applying saturation filters to an element.

saturate-0 saturate: saturate(0);

saturate-50 saturate: saturate(.5);

saturate-100 saturate: saturate(1);

saturate-150 saturate: saturate(1.50);

saturate-200 saturate: saturate(2);

Sepia DOCS

Utilities for applying sepia filters to an element.

sepia-0 sepia: sepia(0);

sepia sepia: sepia(1);

Backdrop Blur DOCS

Utilities for applying backdrop blur filters to an element.

backdrop-blur-none backdrop-blur: blur(0);

backdrop-blur-sm backdrop-blur: blur(4px);

 backdrop-blur backdrop-blur: blur(8px);

backdrop-blur-md backdrop-blur: blur(12px);

backdrop-blur-lg backdrop-blur: blur(16px);

backdrop-blur-xl backdrop-blur: blur(24px);

backdrop-blur-2xl backdrop-blur: blur(40px);

backdrop-blur-3xl backdrop-blur: blur(64px);

Backdrop Brightness DOCS

Utilities for applying Backdrop Brightness filters to an element.

backdrop-brightness-0 backdrop-brightness: brightness(0);

backdrop-brightness-sm backdrop-brightness: brightness(4px);

backdrop-brightness backdrop-brightness: brightness(8px);

backdrop-brightness-md backdrop-brightness: brightness(12px);

backdrop-brightness-lg backdrop-brightness: brightness(16px);

backdrop-brightness-xl backdrop-brightness: brightness(24px);

backdrop-brightness-2xl backdrop-brightness: brightness(40px);

backdrop-brightness-3xl backdrop-brightness: brightness(64px);

Backdrop Contrast DOCS

Utilities for applying backdrop contrast filters to an element.

backdrop-contrast-0 backdrop-contrast: contrast(0);

backdrop-contrast-50 backdrop-contrast: contrast(.5);

backdrop-contrast-75 backdrop-contrast: contrast(.75);

backdrop-contrast-100 backdrop-contrast: contrast(1);

backdrop-contrast-125 backdrop-contrast: contrast(1.25);

backdrop-contrast-150 backdrop-contrast: contrast(1.5);

backdrop-contrast-200 backdrop-contrast: contrast(2);

Backdrop Grayscale DOCS

Utilities for applying backdrop grayscale filters to an element.

backdrop-grayscale-0 backdrop-grayscale: grayscale(0);

backdrop-grayscale backdrop-grayscale: grayscale(1);

Backdrop Hue Rotate DOCS

Utilities for applying backdrop hue-rotate filters to an element.

backdrop-hue-rotate-0 backdrop-hue-rotate: hue-rotate(0deg);

backdrop-hue-rotate-15 backdrop-hue-rotate: hue-rotate(15deg);

backdrop-hue-rotate-30 backdrop-hue-rotate: hue-rotate(30deg);

backdrop-hue-rotate-60 backdrop-hue-rotate: hue-rotate(60deg);

backdrop-hue-rotate-90 backdrop-hue-rotate: hue-rotate(90deg);

backdrop-hue-rotate-180 backdrop-hue-rotate: hue-rotate(180deg);

Backdrop Invert DOCS

Utilities for applying backdrop invert filters to an element.

backdrop-invert-0 backdrop-invert: invert(0);

backdrop-invert backdrop-invert: invert(1);

Backdrop Opacity DOCS

Utilities for applying backdrop opacity filters to an element.

backdrop-opacity-0 backdrop-opacity: opacity(0);

backdrop-opacity-5 backdrop-opacity: opacity(0.05);

backdrop-opacity-10 backdrop-opacity: opacity(0.1);

backdrop-opacity-20 backdrop-opacity: opacity(0.2);

backdrop-opacity-25 backdrop-opacity: opacity(0.25);

backdrop-opacity-30 backdrop-opacity: opacity(0.3);

backdrop-opacity-40 backdrop-opacity: opacity(0.4);

backdrop-opacity-50 backdrop-opacity: opacity(0.5);

backdrop-opacity-60 backdrop-opacity: opacity(0.6);

 backdrop-opacity-70 backdrop-opacity: opacity(0.7);

backdrop-opacity-75 backdrop-opacity: opacity(0.75);

backdrop-opacity-80 backdrop-opacity: opacity(0.8);

backdrop-opacity-90 backdrop-opacity: opacity(0.9);

backdrop-opacity-95 backdrop-opacity: opacity(0.95);

backdrop-opacity-100 backdrop-opacity: opacity(1);

Backdrop Saturate DOCS

Utilities for applying backdrop saturation filters to an element.

backdrop-saturate-0 backdrop-saturate: saturate(0);

backdrop-saturate-50 backdrop-saturate: saturate(.5);

backdrop-saturate-100 backdrop-saturate: saturate(1);

backdrop-saturate-150 backdrop-saturate: saturate(1.50);

backdrop-saturate-200 backdrop-saturate: saturate(2);

Backdrop Sepia DOCS

Utilities for applying backdrop sepia filters to an element.

backdrop-sepia-0 backdrop-sepia: sepia(0);

backdrop-sepia backdrop-sepia: sepia(1);

Accessibility

Screen Readers DOCS

Utilities for improving accessibility with screen readers.

position: absolute; width: 1px; height: 1px; padding: 0; margin:

sr-only -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
border-width: 0;

position: static; width: auto; height: auto; padding: 0; margin: 0;

not-sr-only
overflow: visible; clip: auto; white-space: normal;
© Copyright 2023 by Tailwind Components