Tailwind Classes
Below is a complete list of the customized Tailwind utility classes we use as a central part of the SF design system.
Layout
Overflow
Utilities for controlling how an element handles content that is too large for the container.
| sr-only | overflow: hidden | |
| not-sr-only | overflow: visible | |
| overflow-auto | overflow: auto | |
| overflow-hidden | overflow: hidden | |
| overflow-visible | overflow: visible | |
| overflow-scroll | overflow: scroll | |
| overflow-x-auto | overflow-x: auto | |
| overflow-x-hidden | overflow-x: hidden | |
| overflow-x-visible | overflow-x: visible | |
| overflow-x-scroll | overflow-x: scroll | |
| overflow-y-auto | overflow-y: auto | |
| overflow-y-hidden | overflow-y: hidden | |
| overflow-y-visible | overflow-y: visible | |
| overflow-y-scroll | overflow-y: scroll |
Position
Utilities for controlling how an element is positioned in the DOM.
| sr-only | position: absolute | |
| not-sr-only | position: static | |
| static | position: static | |
| fixed | position: fixed | |
| absolute | position: absolute | |
| relative | position: relative | |
| sticky | position: -webkit-sticky | |
| sticky | position: sticky |
Visibility
Utilities for controlling the visibility of an element.
| visible | visibility: visible | |
| invisible | visibility: hidden |
Top / Right / Bottom / Left
Utilities for controlling the placement of positioned elements.
| inset-0 | bottom: 0 | |
| inset-2 | bottom: 2px | |
| inset-4 | bottom: 4px | |
| inset-8 | bottom: 8px | |
| inset-12 | bottom: 12px | |
| inset-16 | bottom: 16px | |
| inset-20 | bottom: 20px | |
| inset-24 | bottom: 24px | |
| inset-28 | bottom: 28px | |
| inset-40 | bottom: 40px | |
| inset-48 | bottom: 48px | |
| inset-60 | bottom: 60px | |
| inset-80 | bottom: 80px | |
| inset-96 | bottom: 96px | |
| inset-100 | bottom: 100px | |
| inset-auto | bottom: auto | |
| -inset-2 | bottom: -2px | |
| -inset-4 | bottom: -4px | |
| -inset-8 | bottom: -8px | |
| -inset-12 | bottom: -12px | |
| -inset-16 | bottom: -16px | |
| -inset-20 | bottom: -20px | |
| -inset-24 | bottom: -24px | |
| -inset-28 | bottom: -28px | |
| -inset-40 | bottom: -40px | |
| -inset-48 | bottom: -48px | |
| -inset-60 | bottom: -60px | |
| -inset-80 | bottom: -80px | |
| -inset-96 | bottom: -96px | |
| -inset-100 | bottom: -100px | |
| inset-full | bottom: 100% | |
| -inset-full | bottom: -100% | |
| inset-y-0 | bottom: 0 | |
| inset-y-2 | bottom: 2px | |
| inset-y-4 | bottom: 4px | |
| inset-y-8 | bottom: 8px | |
| inset-y-12 | bottom: 12px | |
| inset-y-16 | bottom: 16px | |
| inset-y-20 | bottom: 20px | |
| inset-y-24 | bottom: 24px | |
| inset-y-28 | bottom: 28px | |
| inset-y-40 | bottom: 40px | |
| inset-y-48 | bottom: 48px | |
| inset-y-60 | bottom: 60px | |
| inset-y-80 | bottom: 80px | |
| inset-y-96 | bottom: 96px | |
| inset-y-100 | bottom: 100px | |
| inset-y-auto | bottom: auto | |
| -inset-y-2 | bottom: -2px | |
| -inset-y-4 | bottom: -4px | |
| -inset-y-8 | bottom: -8px | |
| -inset-y-12 | bottom: -12px | |
| -inset-y-16 | bottom: -16px | |
| -inset-y-20 | bottom: -20px | |
| -inset-y-24 | bottom: -24px | |
| -inset-y-28 | bottom: -28px | |
| -inset-y-40 | bottom: -40px | |
| -inset-y-48 | bottom: -48px | |
| -inset-y-60 | bottom: -60px | |
| -inset-y-80 | bottom: -80px | |
| -inset-y-96 | bottom: -96px | |
| -inset-y-100 | bottom: -100px | |
| inset-y-full | bottom: 100% | |
| -inset-y-full | bottom: -100% | |
| bottom-0 | bottom: 0 | |
| bottom-2 | bottom: 2px | |
| bottom-4 | bottom: 4px | |
| bottom-8 | bottom: 8px | |
| bottom-12 | bottom: 12px | |
| bottom-16 | bottom: 16px | |
| bottom-20 | bottom: 20px | |
| bottom-24 | bottom: 24px | |
| bottom-28 | bottom: 28px | |
| bottom-40 | bottom: 40px | |
| bottom-48 | bottom: 48px | |
| bottom-60 | bottom: 60px | |
| bottom-80 | bottom: 80px | |
| bottom-96 | bottom: 96px | |
| bottom-100 | bottom: 100px | |
| bottom-auto | bottom: auto | |
| -bottom-2 | bottom: -2px | |
| -bottom-4 | bottom: -4px | |
| -bottom-8 | bottom: -8px | |
| -bottom-12 | bottom: -12px | |
| -bottom-16 | bottom: -16px | |
| -bottom-20 | bottom: -20px | |
| -bottom-24 | bottom: -24px | |
| -bottom-28 | bottom: -28px | |
| -bottom-40 | bottom: -40px | |
| -bottom-48 | bottom: -48px | |
| -bottom-60 | bottom: -60px | |
| -bottom-80 | bottom: -80px | |
| -bottom-96 | bottom: -96px | |
| -bottom-100 | bottom: -100px | |
| bottom-full | bottom: 100% | |
| -bottom-full | bottom: -100% | |
| inset-0 | left: 0 | |
| inset-2 | left: 2px | |
| inset-4 | left: 4px | |
| inset-8 | left: 8px | |
| inset-12 | left: 12px | |
| inset-16 | left: 16px | |
| inset-20 | left: 20px | |
| inset-24 | left: 24px | |
| inset-28 | left: 28px | |
| inset-40 | left: 40px | |
| inset-48 | left: 48px | |
| inset-60 | left: 60px | |
| inset-80 | left: 80px | |
| inset-96 | left: 96px | |
| inset-100 | left: 100px | |
| inset-auto | left: auto | |
| -inset-2 | left: -2px | |
| -inset-4 | left: -4px | |
| -inset-8 | left: -8px | |
| -inset-12 | left: -12px | |
| -inset-16 | left: -16px | |
| -inset-20 | left: -20px | |
| -inset-24 | left: -24px | |
| -inset-28 | left: -28px | |
| -inset-40 | left: -40px | |
| -inset-48 | left: -48px | |
| -inset-60 | left: -60px | |
| -inset-80 | left: -80px | |
| -inset-96 | left: -96px | |
| -inset-100 | left: -100px | |
| inset-full | left: 100% | |
| -inset-full | left: -100% | |
| inset-x-0 | left: 0 | |
| inset-x-2 | left: 2px | |
| inset-x-4 | left: 4px | |
| inset-x-8 | left: 8px | |
| inset-x-12 | left: 12px | |
| inset-x-16 | left: 16px | |
| inset-x-20 | left: 20px | |
| inset-x-24 | left: 24px | |
| inset-x-28 | left: 28px | |
| inset-x-40 | left: 40px | |
| inset-x-48 | left: 48px | |
| inset-x-60 | left: 60px | |
| inset-x-80 | left: 80px | |
| inset-x-96 | left: 96px | |
| inset-x-100 | left: 100px | |
| inset-x-auto | left: auto | |
| -inset-x-2 | left: -2px | |
| -inset-x-4 | left: -4px | |
| -inset-x-8 | left: -8px | |
| -inset-x-12 | left: -12px | |
| -inset-x-16 | left: -16px | |
| -inset-x-20 | left: -20px | |
| -inset-x-24 | left: -24px | |
| -inset-x-28 | left: -28px | |
| -inset-x-40 | left: -40px | |
| -inset-x-48 | left: -48px | |
| -inset-x-60 | left: -60px | |
| -inset-x-80 | left: -80px | |
| -inset-x-96 | left: -96px | |
| -inset-x-100 | left: -100px | |
| inset-x-full | left: 100% | |
| -inset-x-full | left: -100% | |
| left-0 | left: 0 | |
| left-2 | left: 2px | |
| left-4 | left: 4px | |
| left-8 | left: 8px | |
| left-12 | left: 12px | |
| left-16 | left: 16px | |
| left-20 | left: 20px | |
| left-24 | left: 24px | |
| left-28 | left: 28px | |
| left-40 | left: 40px | |
| left-48 | left: 48px | |
| left-60 | left: 60px | |
| left-80 | left: 80px | |
| left-96 | left: 96px | |
| left-100 | left: 100px | |
| left-auto | left: auto | |
| -left-2 | left: -2px | |
| -left-4 | left: -4px | |
| -left-8 | left: -8px | |
| -left-12 | left: -12px | |
| -left-16 | left: -16px | |
| -left-20 | left: -20px | |
| -left-24 | left: -24px | |
| -left-28 | left: -28px | |
| -left-40 | left: -40px | |
| -left-48 | left: -48px | |
| -left-60 | left: -60px | |
| -left-80 | left: -80px | |
| -left-96 | left: -96px | |
| -left-100 | left: -100px | |
| left-full | left: 100% | |
| -left-full | left: -100% | |
| inset-0 | right: 0 | |
| inset-2 | right: 2px | |
| inset-4 | right: 4px | |
| inset-8 | right: 8px | |
| inset-12 | right: 12px | |
| inset-16 | right: 16px | |
| inset-20 | right: 20px | |
| inset-24 | right: 24px | |
| inset-28 | right: 28px | |
| inset-40 | right: 40px | |
| inset-48 | right: 48px | |
| inset-60 | right: 60px | |
| inset-80 | right: 80px | |
| inset-96 | right: 96px | |
| inset-100 | right: 100px | |
| inset-auto | right: auto | |
| -inset-2 | right: -2px | |
| -inset-4 | right: -4px | |
| -inset-8 | right: -8px | |
| -inset-12 | right: -12px | |
| -inset-16 | right: -16px | |
| -inset-20 | right: -20px | |
| -inset-24 | right: -24px | |
| -inset-28 | right: -28px | |
| -inset-40 | right: -40px | |
| -inset-48 | right: -48px | |
| -inset-60 | right: -60px | |
| -inset-80 | right: -80px | |
| -inset-96 | right: -96px | |
| -inset-100 | right: -100px | |
| inset-full | right: 100% | |
| -inset-full | right: -100% | |
| inset-x-0 | right: 0 | |
| inset-x-2 | right: 2px | |
| inset-x-4 | right: 4px | |
| inset-x-8 | right: 8px | |
| inset-x-12 | right: 12px | |
| inset-x-16 | right: 16px | |
| inset-x-20 | right: 20px | |
| inset-x-24 | right: 24px | |
| inset-x-28 | right: 28px | |
| inset-x-40 | right: 40px | |
| inset-x-48 | right: 48px | |
| inset-x-60 | right: 60px | |
| inset-x-80 | right: 80px | |
| inset-x-96 | right: 96px | |
| inset-x-100 | right: 100px | |
| inset-x-auto | right: auto | |
| -inset-x-2 | right: -2px | |
| -inset-x-4 | right: -4px | |
| -inset-x-8 | right: -8px | |
| -inset-x-12 | right: -12px | |
| -inset-x-16 | right: -16px | |
| -inset-x-20 | right: -20px | |
| -inset-x-24 | right: -24px | |
| -inset-x-28 | right: -28px | |
| -inset-x-40 | right: -40px | |
| -inset-x-48 | right: -48px | |
| -inset-x-60 | right: -60px | |
| -inset-x-80 | right: -80px | |
| -inset-x-96 | right: -96px | |
| -inset-x-100 | right: -100px | |
| inset-x-full | right: 100% | |
| -inset-x-full | right: -100% | |
| right-0 | right: 0 | |
| right-2 | right: 2px | |
| right-4 | right: 4px | |
| right-8 | right: 8px | |
| right-12 | right: 12px | |
| right-16 | right: 16px | |
| right-20 | right: 20px | |
| right-24 | right: 24px | |
| right-28 | right: 28px | |
| right-40 | right: 40px | |
| right-48 | right: 48px | |
| right-60 | right: 60px | |
| right-80 | right: 80px | |
| right-96 | right: 96px | |
| right-100 | right: 100px | |
| right-auto | right: auto | |
| -right-2 | right: -2px | |
| -right-4 | right: -4px | |
| -right-8 | right: -8px | |
| -right-12 | right: -12px | |
| -right-16 | right: -16px | |
| -right-20 | right: -20px | |
| -right-24 | right: -24px | |
| -right-28 | right: -28px | |
| -right-40 | right: -40px | |
| -right-48 | right: -48px | |
| -right-60 | right: -60px | |
| -right-80 | right: -80px | |
| -right-96 | right: -96px | |
| -right-100 | right: -100px | |
| right-full | right: 100% | |
| -right-full | right: -100% | |
| inset-0 | top: 0 | |
| inset-2 | top: 2px | |
| inset-4 | top: 4px | |
| inset-8 | top: 8px | |
| inset-12 | top: 12px | |
| inset-16 | top: 16px | |
| inset-20 | top: 20px | |
| inset-24 | top: 24px | |
| inset-28 | top: 28px | |
| inset-40 | top: 40px | |
| inset-48 | top: 48px | |
| inset-60 | top: 60px | |
| inset-80 | top: 80px | |
| inset-96 | top: 96px | |
| inset-100 | top: 100px | |
| inset-auto | top: auto | |
| -inset-2 | top: -2px | |
| -inset-4 | top: -4px | |
| -inset-8 | top: -8px | |
| -inset-12 | top: -12px | |
| -inset-16 | top: -16px | |
| -inset-20 | top: -20px | |
| -inset-24 | top: -24px | |
| -inset-28 | top: -28px | |
| -inset-40 | top: -40px | |
| -inset-48 | top: -48px | |
| -inset-60 | top: -60px | |
| -inset-80 | top: -80px | |
| -inset-96 | top: -96px | |
| -inset-100 | top: -100px | |
| inset-full | top: 100% | |
| -inset-full | top: -100% | |
| inset-y-0 | top: 0 | |
| inset-y-2 | top: 2px | |
| inset-y-4 | top: 4px | |
| inset-y-8 | top: 8px | |
| inset-y-12 | top: 12px | |
| inset-y-16 | top: 16px | |
| inset-y-20 | top: 20px | |
| inset-y-24 | top: 24px | |
| inset-y-28 | top: 28px | |
| inset-y-40 | top: 40px | |
| inset-y-48 | top: 48px | |
| inset-y-60 | top: 60px | |
| inset-y-80 | top: 80px | |
| inset-y-96 | top: 96px | |
| inset-y-100 | top: 100px | |
| inset-y-auto | top: auto | |
| -inset-y-2 | top: -2px | |
| -inset-y-4 | top: -4px | |
| -inset-y-8 | top: -8px | |
| -inset-y-12 | top: -12px | |
| -inset-y-16 | top: -16px | |
| -inset-y-20 | top: -20px | |
| -inset-y-24 | top: -24px | |
| -inset-y-28 | top: -28px | |
| -inset-y-40 | top: -40px | |
| -inset-y-48 | top: -48px | |
| -inset-y-60 | top: -60px | |
| -inset-y-80 | top: -80px | |
| -inset-y-96 | top: -96px | |
| -inset-y-100 | top: -100px | |
| inset-y-full | top: 100% | |
| -inset-y-full | top: -100% | |
| top-0 | top: 0 | |
| top-2 | top: 2px | |
| top-4 | top: 4px | |
| top-8 | top: 8px | |
| top-12 | top: 12px | |
| top-16 | top: 16px | |
| top-20 | top: 20px | |
| top-24 | top: 24px | |
| top-28 | top: 28px | |
| top-40 | top: 40px | |
| top-48 | top: 48px | |
| top-60 | top: 60px | |
| top-80 | top: 80px | |
| top-96 | top: 96px | |
| top-100 | top: 100px | |
| top-auto | top: auto | |
| -top-2 | top: -2px | |
| -top-4 | top: -4px | |
| -top-8 | top: -8px | |
| -top-12 | top: -12px | |
| -top-16 | top: -16px | |
| -top-20 | top: -20px | |
| -top-24 | top: -24px | |
| -top-28 | top: -28px | |
| -top-40 | top: -40px | |
| -top-48 | top: -48px | |
| -top-60 | top: -60px | |
| -top-80 | top: -80px | |
| -top-96 | top: -96px | |
| -top-100 | top: -100px | |
| top-full | top: 100% | |
| -top-full | top: -100% |
Z Index
Utilities for controlling the stack order of an 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 |
Display
Utilities for controlling 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 |
Flexbox & Grid
Grid Column
Utilities for controlling how elements are sized and placed across grid columns.
| col-span-auto | grid-column: auto | |
| col-span-full | grid-column: 1/-1 | |
| 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 |
Grid Row
Utilities for controlling how elements are sized and placed across grid rows.
| row-span-auto | grid-row: auto | |
| row-span-full | grid-row: 1/-1 | |
| 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 |
Flex
Utilities for controlling how flex items both 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 Shrink
Utilities for controlling how flex items shrink.
| flex-shrink-0 | flex-shrink: 0 | |
| flex-shrink | flex-shrink: 1 |
Grid Template Columns
Utilities for specifying the columns in a 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-6 | grid-template-columns: repeat(6,minmax(0,1fr)) | |
| grid-cols-12 | grid-template-columns: repeat(12,minmax(0,1fr)) |
Grid Template Rows
Utilities for specifying the rows in a grid layout.
| grid-rows-1 | grid-template-rows: repeat(1,minmax(0,auto)) | |
| grid-rows-2 | grid-template-rows: repeat(2,minmax(0,auto)) | |
| grid-rows-3 | grid-template-rows: repeat(3,minmax(0,auto)) |
Flex Direction
Utilities for controlling the 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
Utilities for controlling how flex items wrap.
| flex-wrap | flex-wrap: wrap | |
| flex-wrap-reverse | flex-wrap: wrap-reverse | |
| flex-nowrap | flex-wrap: nowrap |
Align Content
Utilities for controlling how rows are positioned in multi-row flex and grid containers.
| content-center | align-content: center | |
| content-start | align-content: flex-start | |
| 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
Utilities for controlling how flex and grid items are positioned along a container's cross axis.
| items-start | align-items: flex-start | |
| items-end | align-items: flex-end | |
| items-center | align-items: center | |
| items-baseline | align-items: baseline | |
| items-stretch | align-items: stretch |
Justify Content
Utilities for controlling how flex and grid items are positioned along a container's main axis.
| justify-start | justify-content: flex-start | |
| justify-end | justify-content: flex-end | |
| justify-center | justify-content: center | |
| justify-between | justify-content: space-between | |
| justify-around | justify-content: space-around | |
| justify-evenly | justify-content: space-evenly |
Justify Items
Utilities for controlling how grid items are aligned along their inline axis.
| justify-items-start | justify-items: start | |
| justify-items-end | justify-items: end | |
| justify-items-center | justify-items: center | |
| justify-items-stretch | justify-items: stretch |
Gap
Utilities for controlling gutters between grid and flexbox items.
| gap-0 | gap: 0 | |
| gap-2 | gap: 2px | |
| gap-4 | gap: 4px | |
| gap-8 | gap: 8px | |
| gap-12 | gap: 12px | |
| gap-16 | gap: 16px | |
| gap-20 | gap: 20px | |
| gap-24 | gap: 24px | |
| gap-28 | gap: 28px | |
| gap-40 | gap: 40px | |
| gap-48 | gap: 48px | |
| gap-60 | gap: 60px | |
| gap-80 | gap: 80px | |
| gap-96 | gap: 96px | |
| gap-100 | gap: 100px | |
| gap-x-0 | -webkit-column-gap: 0 | |
| gap-x-2 | -webkit-column-gap: 2px | |
| gap-x-4 | -webkit-column-gap: 4px | |
| gap-x-8 | -webkit-column-gap: 8px | |
| gap-x-12 | -webkit-column-gap: 12px | |
| gap-x-16 | -webkit-column-gap: 16px | |
| gap-x-20 | -webkit-column-gap: 20px | |
| gap-x-24 | -webkit-column-gap: 24px | |
| gap-x-28 | -webkit-column-gap: 28px | |
| gap-x-40 | -webkit-column-gap: 40px | |
| gap-x-48 | -webkit-column-gap: 48px | |
| gap-x-60 | -webkit-column-gap: 60px | |
| gap-x-80 | -webkit-column-gap: 80px | |
| gap-x-96 | -webkit-column-gap: 96px | |
| gap-x-100 | -webkit-column-gap: 100px | |
| gap-x-0 | column-gap: 0 | |
| gap-x-2 | column-gap: 2px | |
| gap-x-4 | column-gap: 4px | |
| gap-x-8 | column-gap: 8px | |
| gap-x-12 | column-gap: 12px | |
| gap-x-16 | column-gap: 16px | |
| gap-x-20 | column-gap: 20px | |
| gap-x-24 | column-gap: 24px | |
| gap-x-28 | column-gap: 28px | |
| gap-x-40 | column-gap: 40px | |
| gap-x-48 | column-gap: 48px | |
| gap-x-60 | column-gap: 60px | |
| gap-x-80 | column-gap: 80px | |
| gap-x-96 | column-gap: 96px | |
| gap-x-100 | column-gap: 100px | |
| gap-y-0 | row-gap: 0 | |
| gap-y-2 | row-gap: 2px | |
| gap-y-4 | row-gap: 4px | |
| gap-y-8 | row-gap: 8px | |
| gap-y-12 | row-gap: 12px | |
| gap-y-16 | row-gap: 16px | |
| gap-y-20 | row-gap: 20px | |
| gap-y-24 | row-gap: 24px | |
| gap-y-28 | row-gap: 28px | |
| gap-y-40 | row-gap: 40px | |
| gap-y-48 | row-gap: 48px | |
| gap-y-60 | row-gap: 60px | |
| gap-y-80 | row-gap: 80px | |
| gap-y-96 | row-gap: 96px | |
| gap-y-100 | row-gap: 100px |
Sizing
Height
Utilities for setting the height of an element.
| sr-only | height: 1px | |
| not-sr-only | height: auto | |
| h-0 | height: 0 | |
| h-2 | height: 2px | |
| h-4 | height: 4px | |
| h-8 | height: 8px | |
| h-12 | height: 12px | |
| h-16 | height: 16px | |
| h-20 | height: 20px | |
| h-24 | height: 24px | |
| h-28 | height: 28px | |
| h-40 | height: 40px | |
| h-48 | height: 48px | |
| h-60 | height: 60px | |
| h-80 | height: 80px | |
| h-96 | height: 96px | |
| h-100 | height: 100px | |
| h-auto | height: auto | |
| h-full | height: 100% |
Width
Utilities for setting the width of an element.
| sr-only | width: 1px | |
| not-sr-only | width: auto | |
| w-0 | width: 0 | |
| w-2 | width: 2px | |
| w-4 | width: 4px | |
| w-8 | width: 8px | |
| w-12 | width: 12px | |
| w-16 | width: 16px | |
| w-20 | width: 20px | |
| w-24 | width: 24px | |
| w-28 | width: 28px | |
| w-40 | width: 40px | |
| w-48 | width: 48px | |
| w-60 | width: 60px | |
| w-80 | width: 80px | |
| w-96 | width: 96px | |
| w-100 | width: 100px | |
| w-auto | width: auto | |
| w-sm | width: 340px | |
| w-md | width: 500px | |
| w-lg | width: 884px | |
| w-xl | width: 1076px |
Max Width
Utilities for setting the maximum width of an element.
| max-w-0 | max-width: 0 | |
| max-w-2 | max-width: 2px | |
| max-w-4 | max-width: 4px | |
| max-w-8 | max-width: 8px | |
| max-w-12 | max-width: 12px | |
| max-w-16 | max-width: 16px | |
| max-w-20 | max-width: 20px | |
| max-w-24 | max-width: 24px | |
| max-w-28 | max-width: 28px | |
| max-w-40 | max-width: 40px | |
| max-w-48 | max-width: 48px | |
| max-w-60 | max-width: 60px | |
| max-w-80 | max-width: 80px | |
| max-w-96 | max-width: 96px | |
| max-w-100 | max-width: 100px | |
| max-w-auto | max-width: auto | |
| max-w-sm | max-width: 340px | |
| max-w-md | max-width: 500px | |
| max-w-lg | max-width: 884px | |
| max-w-xl | max-width: 1076px |
Backgrounds
Background Color
Utilities for controlling an element's background color.
| bg-none | background-color: transparent | ||
| bg-white | background-color: #fff | ||
| bg-black | background-color: #212123 | ||
| bg-action | background-color: #495ed4 | ||
| bg-blue-1 | background-color: #edf4f7 | ||
| bg-blue-2 | background-color: #a9d6ea | ||
| bg-blue-bright | background-color: #495ed4 | ||
| bg-blue-dark | background-color: #0c1464 | ||
| bg-slate-1 | background-color: #eff3f4 | ||
| bg-slate-2 | background-color: #5a7a92 | ||
| bg-slate-3 | background-color: #1d4d70 | ||
| bg-slate-4 | background-color: #002b48 | ||
| bg-slate | background-color: #1d4d70 | ||
| bg-slate-light | background-color: #5a7a92 | ||
| bg-green-1 | background-color: #e9f7ec | ||
| bg-green-2 | background-color: #c0e2c5 | ||
| bg-green-3 | background-color: #00866a | ||
| bg-green-4 | background-color: #1b674d | ||
| bg-red-1 | background-color: #f5e9e5 | ||
| bg-red-2 | background-color: #efcabb | ||
| bg-red-3 | background-color: #c55236 | ||
| bg-red-4 | background-color: #9b3921 | ||
| bg-purple-1 | background-color: #edebf6 | ||
| bg-purple-2 | background-color: #cccced | ||
| bg-purple-3 | background-color: #7d61b3 | ||
| bg-purple-4 | background-color: #543a89 | ||
| bg-yellow-1 | background-color: #f8f1df | ||
| bg-yellow-2 | background-color: #f9e3a3 | ||
| bg-yellow-3 | background-color: #f4c435 | ||
| bg-yellow-4 | background-color: #e0a81a | ||
| bg-grey-1 | background-color: #f6f6f6 | ||
| bg-grey-2 | background-color: #e2e2e2 | ||
| bg-grey-3 | background-color: #c2c2c2 | ||
| bg-grey-4 | background-color: #a1a1a1 | ||
| bg-grey-dark | background-color: #424244 | ||
| bg-grey-focus | background-color: #a1a1a1 | ||
| bg-sequential-darkBlue-1 | background-color: #9389ad | ||
| bg-sequential-darkBlue-2 | background-color: #8074a3 | ||
| bg-sequential-darkBlue-3 | background-color: #6e6099 | ||
| bg-sequential-darkBlue-4 | background-color: #5a4d8f | ||
| bg-sequential-darkBlue-5 | background-color: #463a84 | ||
| bg-sequential-darkBlue-6 | background-color: #2f287a | ||
| bg-sequential-darkBlue-7 | background-color: #0d1670 | ||
| bg-sequential-orange-1 | background-color: #472917 | ||
| bg-sequential-orange-2 | background-color: #603418 | ||
| bg-sequential-orange-3 | background-color: #7b3f18 | ||
| bg-sequential-orange-4 | background-color: #964a17 | ||
| bg-sequential-orange-5 | background-color: #b15514 | ||
| bg-sequential-orange-6 | background-color: #ce610f | ||
| bg-sequential-orange-7 | background-color: #eb6d05 | ||
| bg-sequential-teal-1 | background-color: #004644 | ||
| bg-sequential-teal-2 | background-color: #055451 | ||
| bg-sequential-teal-3 | background-color: #0b625f | ||
| bg-sequential-teal-4 | background-color: #12706d | ||
| bg-sequential-teal-5 | background-color: #197f7c | ||
| bg-sequential-teal-6 | background-color: #208e8b | ||
| bg-sequential-teal-7 | background-color: #279d9a | ||
| bg-sequential-blue-1 | background-color: #1e405d | ||
| bg-sequential-blue-2 | background-color: #204e73 | ||
| bg-sequential-blue-3 | background-color: #205c89 | ||
| bg-sequential-blue-4 | background-color: #1f6ba0 | ||
| bg-sequential-blue-5 | background-color: #1b7ab7 | ||
| bg-sequential-blue-6 | background-color: #1389cf | ||
| bg-sequential-blue-7 | background-color: #0099e8 | ||
| bg-sequential-purple-1 | background-color: #241a37 | ||
| bg-sequential-purple-2 | background-color: #32244d | ||
| bg-sequential-purple-3 | background-color: #402e65 | ||
| bg-sequential-purple-4 | background-color: #4f397d | ||
| bg-sequential-purple-5 | background-color: #5e4397 | ||
| bg-sequential-purple-6 | background-color: #6e4fb1 | ||
| bg-sequential-purple-7 | background-color: #7e5acc | ||
| bg-sequential-pink-1 | background-color: #39121f | ||
| bg-sequential-pink-2 | background-color: #51152b | ||
| bg-sequential-pink-3 | background-color: #691737 | ||
| bg-sequential-pink-4 | background-color: #831644 | ||
| bg-sequential-pink-5 | background-color: #9e1451 | ||
| bg-sequential-pink-6 | background-color: #b90e5f | ||
| bg-sequential-pink-7 | background-color: #d5006d | ||
| bg-sequential-grey-0 | background-color: #c6c6c6 |
Transforms
Filters
Accessibility
Spacing
Margin
Utilities for controlling an element's margin.
| sr-only | margin: -1px | |
| not-sr-only | margin: 0 | |
| m-0 | margin: 0 | |
| m-2 | margin: 2px | |
| m-4 | margin: 4px | |
| m-8 | margin: 8px | |
| m-12 | margin: 12px | |
| m-16 | margin: 16px | |
| m-20 | margin: 20px | |
| m-24 | margin: 24px | |
| m-28 | margin: 28px | |
| m-40 | margin: 40px | |
| m-48 | margin: 48px | |
| m-60 | margin: 60px | |
| m-80 | margin: 80px | |
| m-96 | margin: 96px | |
| m-100 | margin: 100px | |
| m-auto | margin: auto | |
| mx-0 | margin-left: 0 | |
| mx-2 | margin-left: 2px | |
| mx-4 | margin-left: 4px | |
| mx-8 | margin-left: 8px | |
| mx-12 | margin-left: 12px | |
| mx-16 | margin-left: 16px | |
| mx-20 | margin-left: 20px | |
| mx-24 | margin-left: 24px | |
| mx-28 | margin-left: 28px | |
| mx-40 | margin-left: 40px | |
| mx-48 | margin-left: 48px | |
| mx-60 | margin-left: 60px | |
| mx-80 | margin-left: 80px | |
| mx-96 | margin-left: 96px | |
| mx-100 | margin-left: 100px | |
| mx-auto | margin-left: auto | |
| ml-0 | margin-left: 0 | |
| ml-2 | margin-left: 2px | |
| ml-4 | margin-left: 4px | |
| ml-8 | margin-left: 8px | |
| ml-12 | margin-left: 12px | |
| ml-16 | margin-left: 16px | |
| ml-20 | margin-left: 20px | |
| ml-24 | margin-left: 24px | |
| ml-28 | margin-left: 28px | |
| ml-40 | margin-left: 40px | |
| ml-48 | margin-left: 48px | |
| ml-60 | margin-left: 60px | |
| ml-80 | margin-left: 80px | |
| ml-96 | margin-left: 96px | |
| ml-100 | margin-left: 100px | |
| ml-auto | margin-left: auto | |
| mx-0 | margin-right: 0 | |
| mx-2 | margin-right: 2px | |
| mx-4 | margin-right: 4px | |
| mx-8 | margin-right: 8px | |
| mx-12 | margin-right: 12px | |
| mx-16 | margin-right: 16px | |
| mx-20 | margin-right: 20px | |
| mx-24 | margin-right: 24px | |
| mx-28 | margin-right: 28px | |
| mx-40 | margin-right: 40px | |
| mx-48 | margin-right: 48px | |
| mx-60 | margin-right: 60px | |
| mx-80 | margin-right: 80px | |
| mx-96 | margin-right: 96px | |
| mx-100 | margin-right: 100px | |
| mx-auto | margin-right: auto | |
| mr-0 | margin-right: 0 | |
| mr-2 | margin-right: 2px | |
| mr-4 | margin-right: 4px | |
| mr-8 | margin-right: 8px | |
| mr-12 | margin-right: 12px | |
| mr-16 | margin-right: 16px | |
| mr-20 | margin-right: 20px | |
| mr-24 | margin-right: 24px | |
| mr-28 | margin-right: 28px | |
| mr-40 | margin-right: 40px | |
| mr-48 | margin-right: 48px | |
| mr-60 | margin-right: 60px | |
| mr-80 | margin-right: 80px | |
| mr-96 | margin-right: 96px | |
| mr-100 | margin-right: 100px | |
| mr-auto | margin-right: auto | |
| my-0 | margin-bottom: 0 | |
| my-2 | margin-bottom: 2px | |
| my-4 | margin-bottom: 4px | |
| my-8 | margin-bottom: 8px | |
| my-12 | margin-bottom: 12px | |
| my-16 | margin-bottom: 16px | |
| my-20 | margin-bottom: 20px | |
| my-24 | margin-bottom: 24px | |
| my-28 | margin-bottom: 28px | |
| my-40 | margin-bottom: 40px | |
| my-48 | margin-bottom: 48px | |
| my-60 | margin-bottom: 60px | |
| my-80 | margin-bottom: 80px | |
| my-96 | margin-bottom: 96px | |
| my-100 | margin-bottom: 100px | |
| my-auto | margin-bottom: auto | |
| mb-0 | margin-bottom: 0 | |
| mb-2 | margin-bottom: 2px | |
| mb-4 | margin-bottom: 4px | |
| mb-8 | margin-bottom: 8px | |
| mb-12 | margin-bottom: 12px | |
| mb-16 | margin-bottom: 16px | |
| mb-20 | margin-bottom: 20px | |
| mb-24 | margin-bottom: 24px | |
| mb-28 | margin-bottom: 28px | |
| mb-40 | margin-bottom: 40px | |
| mb-48 | margin-bottom: 48px | |
| mb-60 | margin-bottom: 60px | |
| mb-80 | margin-bottom: 80px | |
| mb-96 | margin-bottom: 96px | |
| mb-100 | margin-bottom: 100px | |
| mb-auto | margin-bottom: auto | |
| my-0 | margin-top: 0 | |
| my-2 | margin-top: 2px | |
| my-4 | margin-top: 4px | |
| my-8 | margin-top: 8px | |
| my-12 | margin-top: 12px | |
| my-16 | margin-top: 16px | |
| my-20 | margin-top: 20px | |
| my-24 | margin-top: 24px | |
| my-28 | margin-top: 28px | |
| my-40 | margin-top: 40px | |
| my-48 | margin-top: 48px | |
| my-60 | margin-top: 60px | |
| my-80 | margin-top: 80px | |
| my-96 | margin-top: 96px | |
| my-100 | margin-top: 100px | |
| my-auto | margin-top: auto | |
| mt-0 | margin-top: 0 | |
| mt-2 | margin-top: 2px | |
| mt-4 | margin-top: 4px | |
| mt-8 | margin-top: 8px | |
| mt-12 | margin-top: 12px | |
| mt-16 | margin-top: 16px | |
| mt-20 | margin-top: 20px | |
| mt-24 | margin-top: 24px | |
| mt-28 | margin-top: 28px | |
| mt-40 | margin-top: 40px | |
| mt-48 | margin-top: 48px | |
| mt-60 | margin-top: 60px | |
| mt-80 | margin-top: 80px | |
| mt-96 | margin-top: 96px | |
| mt-100 | margin-top: 100px | |
| mt-auto | margin-top: auto |
Padding
Utilities for controlling an element's padding.
| sr-only | padding: 0 | |
| not-sr-only | padding: 0 | |
| p-0 | padding: 0 | |
| p-2 | padding: 2px | |
| p-4 | padding: 4px | |
| p-8 | padding: 8px | |
| p-12 | padding: 12px | |
| p-16 | padding: 16px | |
| p-20 | padding: 20px | |
| p-24 | padding: 24px | |
| p-28 | padding: 28px | |
| p-40 | padding: 40px | |
| p-48 | padding: 48px | |
| p-60 | padding: 60px | |
| p-80 | padding: 80px | |
| p-96 | padding: 96px | |
| p-100 | padding: 100px | |
| px-0 | padding-left: 0 | |
| px-2 | padding-left: 2px | |
| px-4 | padding-left: 4px | |
| px-8 | padding-left: 8px | |
| px-12 | padding-left: 12px | |
| px-16 | padding-left: 16px | |
| px-20 | padding-left: 20px | |
| px-24 | padding-left: 24px | |
| px-28 | padding-left: 28px | |
| px-40 | padding-left: 40px | |
| px-48 | padding-left: 48px | |
| px-60 | padding-left: 60px | |
| px-80 | padding-left: 80px | |
| px-96 | padding-left: 96px | |
| px-100 | padding-left: 100px | |
| pl-0 | padding-left: 0 | |
| pl-2 | padding-left: 2px | |
| pl-4 | padding-left: 4px | |
| pl-8 | padding-left: 8px | |
| pl-12 | padding-left: 12px | |
| pl-16 | padding-left: 16px | |
| pl-20 | padding-left: 20px | |
| pl-24 | padding-left: 24px | |
| pl-28 | padding-left: 28px | |
| pl-40 | padding-left: 40px | |
| pl-48 | padding-left: 48px | |
| pl-60 | padding-left: 60px | |
| pl-80 | padding-left: 80px | |
| pl-96 | padding-left: 96px | |
| pl-100 | padding-left: 100px | |
| px-0 | padding-right: 0 | |
| px-2 | padding-right: 2px | |
| px-4 | padding-right: 4px | |
| px-8 | padding-right: 8px | |
| px-12 | padding-right: 12px | |
| px-16 | padding-right: 16px | |
| px-20 | padding-right: 20px | |
| px-24 | padding-right: 24px | |
| px-28 | padding-right: 28px | |
| px-40 | padding-right: 40px | |
| px-48 | padding-right: 48px | |
| px-60 | padding-right: 60px | |
| px-80 | padding-right: 80px | |
| px-96 | padding-right: 96px | |
| px-100 | padding-right: 100px | |
| pr-0 | padding-right: 0 | |
| pr-2 | padding-right: 2px | |
| pr-4 | padding-right: 4px | |
| pr-8 | padding-right: 8px | |
| pr-12 | padding-right: 12px | |
| pr-16 | padding-right: 16px | |
| pr-20 | padding-right: 20px | |
| pr-24 | padding-right: 24px | |
| pr-28 | padding-right: 28px | |
| pr-40 | padding-right: 40px | |
| pr-48 | padding-right: 48px | |
| pr-60 | padding-right: 60px | |
| pr-80 | padding-right: 80px | |
| pr-96 | padding-right: 96px | |
| pr-100 | padding-right: 100px | |
| py-0 | padding-bottom: 0 | |
| py-2 | padding-bottom: 2px | |
| py-4 | padding-bottom: 4px | |
| py-8 | padding-bottom: 8px | |
| py-12 | padding-bottom: 12px | |
| py-16 | padding-bottom: 16px | |
| py-20 | padding-bottom: 20px | |
| py-24 | padding-bottom: 24px | |
| py-28 | padding-bottom: 28px | |
| py-40 | padding-bottom: 40px | |
| py-48 | padding-bottom: 48px | |
| py-60 | padding-bottom: 60px | |
| py-80 | padding-bottom: 80px | |
| py-96 | padding-bottom: 96px | |
| py-100 | padding-bottom: 100px | |
| pb-0 | padding-bottom: 0 | |
| pb-2 | padding-bottom: 2px | |
| pb-4 | padding-bottom: 4px | |
| pb-8 | padding-bottom: 8px | |
| pb-12 | padding-bottom: 12px | |
| pb-16 | padding-bottom: 16px | |
| pb-20 | padding-bottom: 20px | |
| pb-24 | padding-bottom: 24px | |
| pb-28 | padding-bottom: 28px | |
| pb-40 | padding-bottom: 40px | |
| pb-48 | padding-bottom: 48px | |
| pb-60 | padding-bottom: 60px | |
| pb-80 | padding-bottom: 80px | |
| pb-96 | padding-bottom: 96px | |
| pb-100 | padding-bottom: 100px | |
| py-0 | padding-top: 0 | |
| py-2 | padding-top: 2px | |
| py-4 | padding-top: 4px | |
| py-8 | padding-top: 8px | |
| py-12 | padding-top: 12px | |
| py-16 | padding-top: 16px | |
| py-20 | padding-top: 20px | |
| py-24 | padding-top: 24px | |
| py-28 | padding-top: 28px | |
| py-40 | padding-top: 40px | |
| py-48 | padding-top: 48px | |
| py-60 | padding-top: 60px | |
| py-80 | padding-top: 80px | |
| py-96 | padding-top: 96px | |
| py-100 | padding-top: 100px | |
| pt-0 | padding-top: 0 | |
| pt-2 | padding-top: 2px | |
| pt-4 | padding-top: 4px | |
| pt-8 | padding-top: 8px | |
| pt-12 | padding-top: 12px | |
| pt-16 | padding-top: 16px | |
| pt-20 | padding-top: 20px | |
| pt-24 | padding-top: 24px | |
| pt-28 | padding-top: 28px | |
| pt-40 | padding-top: 40px | |
| pt-48 | padding-top: 48px | |
| pt-60 | padding-top: 60px | |
| pt-80 | padding-top: 80px | |
| pt-96 | padding-top: 96px | |
| pt-100 | padding-top: 100px |
Borders
Border Width
Utilities for controlling the width of an element's borders.
| sr-only | border-width: 0 | |
| border-0 | border-width: 0 | |
| border-1 | border-width: 1px | |
| border-2 | border-width: 2px | |
| border-3 | border-width: 3px | |
| border-4 | border-width: 4px | |
| border | border-width: 3px | |
| border-t-0 | border-top-width: 0 | |
| border-t-1 | border-top-width: 1px | |
| border-t-2 | border-top-width: 2px | |
| border-t-3 | border-top-width: 3px | |
| border-t-4 | border-top-width: 4px | |
| border-t | border-top-width: 3px | |
| border-r-0 | border-right-width: 0 | |
| border-r-1 | border-right-width: 1px | |
| border-r-2 | border-right-width: 2px | |
| border-r-3 | border-right-width: 3px | |
| border-r-4 | border-right-width: 4px | |
| border-r | border-right-width: 3px | |
| border-b-0 | border-bottom-width: 0 | |
| border-b-1 | border-bottom-width: 1px | |
| border-b-2 | border-bottom-width: 2px | |
| border-b-3 | border-bottom-width: 3px | |
| border-b-4 | border-bottom-width: 4px | |
| border-b | border-bottom-width: 3px | |
| border-l-0 | border-left-width: 0 | |
| border-l-1 | border-left-width: 1px | |
| border-l-2 | border-left-width: 2px | |
| border-l-3 | border-left-width: 3px | |
| border-l-4 | border-left-width: 4px | |
| border-l | border-left-width: 3px |
Border Radius
Utilities for controlling the border radius of an element.
| rounded-0 | border-radius: 0 | |
| rounded-2 | border-radius: 2px | |
| rounded-4 | border-radius: 4px | |
| rounded | border-radius: 8px | |
| rounded-full | border-radius: 100% | |
| rounded-t-0 | border-top-left-radius: 0 | |
| rounded-t-2 | border-top-left-radius: 2px | |
| rounded-t-4 | border-top-left-radius: 4px | |
| rounded-t | border-top-left-radius: 8px | |
| rounded-t-full | border-top-left-radius: 100% | |
| rounded-l-0 | border-top-left-radius: 0 | |
| rounded-l-2 | border-top-left-radius: 2px | |
| rounded-l-4 | border-top-left-radius: 4px | |
| rounded-l | border-top-left-radius: 8px | |
| rounded-l-full | border-top-left-radius: 100% | |
| rounded-tl-0 | border-top-left-radius: 0 | |
| rounded-tl-2 | border-top-left-radius: 2px | |
| rounded-tl-4 | border-top-left-radius: 4px | |
| rounded-tl | border-top-left-radius: 8px | |
| rounded-tl-full | border-top-left-radius: 100% | |
| rounded-t-0 | border-top-right-radius: 0 | |
| rounded-t-2 | border-top-right-radius: 2px | |
| rounded-t-4 | border-top-right-radius: 4px | |
| rounded-t | border-top-right-radius: 8px | |
| rounded-t-full | border-top-right-radius: 100% | |
| rounded-r-0 | border-top-right-radius: 0 | |
| rounded-r-2 | border-top-right-radius: 2px | |
| rounded-r-4 | border-top-right-radius: 4px | |
| rounded-r | border-top-right-radius: 8px | |
| rounded-r-full | border-top-right-radius: 100% | |
| rounded-tr-0 | border-top-right-radius: 0 | |
| rounded-tr-2 | border-top-right-radius: 2px | |
| rounded-tr-4 | border-top-right-radius: 4px | |
| rounded-tr | border-top-right-radius: 8px | |
| rounded-tr-full | border-top-right-radius: 100% | |
| rounded-r-0 | border-bottom-right-radius: 0 | |
| rounded-r-2 | border-bottom-right-radius: 2px | |
| rounded-r-4 | border-bottom-right-radius: 4px | |
| rounded-r | border-bottom-right-radius: 8px | |
| rounded-r-full | border-bottom-right-radius: 100% | |
| rounded-b-0 | border-bottom-right-radius: 0 | |
| rounded-b-2 | border-bottom-right-radius: 2px | |
| rounded-b-4 | border-bottom-right-radius: 4px | |
| rounded-b | border-bottom-right-radius: 8px | |
| rounded-b-full | border-bottom-right-radius: 100% | |
| rounded-br-0 | border-bottom-right-radius: 0 | |
| rounded-br-2 | border-bottom-right-radius: 2px | |
| rounded-br-4 | border-bottom-right-radius: 4px | |
| rounded-br | border-bottom-right-radius: 8px | |
| rounded-br-full | border-bottom-right-radius: 100% | |
| rounded-b-0 | border-bottom-left-radius: 0 | |
| rounded-b-2 | border-bottom-left-radius: 2px | |
| rounded-b-4 | border-bottom-left-radius: 4px | |
| rounded-b | border-bottom-left-radius: 8px | |
| rounded-b-full | border-bottom-left-radius: 100% | |
| rounded-l-0 | border-bottom-left-radius: 0 | |
| rounded-l-2 | border-bottom-left-radius: 2px | |
| rounded-l-4 | border-bottom-left-radius: 4px | |
| rounded-l | border-bottom-left-radius: 8px | |
| rounded-l-full | border-bottom-left-radius: 100% | |
| rounded-bl-0 | border-bottom-left-radius: 0 | |
| rounded-bl-2 | border-bottom-left-radius: 2px | |
| rounded-bl-4 | border-bottom-left-radius: 4px | |
| rounded-bl | border-bottom-left-radius: 8px | |
| rounded-bl-full | border-bottom-left-radius: 100% |
Border Style
Utilities for controlling the style of an element's borders.
| border-solid | border-style: solid | |
| border-dashed | border-style: dashed | |
| border-dotted | border-style: dotted | |
| border-double | border-style: double | |
| border-none | border-style: none |
Border Color
Utilities for controlling the color of an element's borders.
| currentColor | border-current | border-color: currentColor | |
| border-none | border-color: transparent | ||
| border-white | border-color: #fff | ||
| border-black | border-color: #212123 | ||
| border-action | border-color: #495ed4 | ||
| border-blue-1 | border-color: #edf4f7 | ||
| border-blue-2 | border-color: #a9d6ea | ||
| border-blue-bright | border-color: #495ed4 | ||
| border-blue-dark | border-color: #0c1464 | ||
| border-slate-1 | border-color: #eff3f4 | ||
| border-slate-2 | border-color: #5a7a92 | ||
| border-slate-3 | border-color: #1d4d70 | ||
| border-slate-4 | border-color: #002b48 | ||
| border-slate | border-color: #1d4d70 | ||
| border-slate-light | border-color: #5a7a92 | ||
| border-green-1 | border-color: #e9f7ec | ||
| border-green-2 | border-color: #c0e2c5 | ||
| border-green-3 | border-color: #00866a | ||
| border-green-4 | border-color: #1b674d | ||
| border-red-1 | border-color: #f5e9e5 | ||
| border-red-2 | border-color: #efcabb | ||
| border-red-3 | border-color: #c55236 | ||
| border-red-4 | border-color: #9b3921 | ||
| border-purple-1 | border-color: #edebf6 | ||
| border-purple-2 | border-color: #cccced | ||
| border-purple-3 | border-color: #7d61b3 | ||
| border-purple-4 | border-color: #543a89 | ||
| border-yellow-1 | border-color: #f8f1df | ||
| border-yellow-2 | border-color: #f9e3a3 | ||
| border-yellow-3 | border-color: #f4c435 | ||
| border-yellow-4 | border-color: #e0a81a | ||
| border-grey-1 | border-color: #f6f6f6 | ||
| border-grey-2 | border-color: #e2e2e2 | ||
| border-grey-3 | border-color: #c2c2c2 | ||
| border-grey-4 | border-color: #a1a1a1 | ||
| border-grey-dark | border-color: #424244 | ||
| border-grey-focus | border-color: #a1a1a1 | ||
| border-sequential-darkBlue-1 | border-color: #9389ad | ||
| border-sequential-darkBlue-2 | border-color: #8074a3 | ||
| border-sequential-darkBlue-3 | border-color: #6e6099 | ||
| border-sequential-darkBlue-4 | border-color: #5a4d8f | ||
| border-sequential-darkBlue-5 | border-color: #463a84 | ||
| border-sequential-darkBlue-6 | border-color: #2f287a | ||
| border-sequential-darkBlue-7 | border-color: #0d1670 | ||
| border-sequential-orange-1 | border-color: #472917 | ||
| border-sequential-orange-2 | border-color: #603418 | ||
| border-sequential-orange-3 | border-color: #7b3f18 | ||
| border-sequential-orange-4 | border-color: #964a17 | ||
| border-sequential-orange-5 | border-color: #b15514 | ||
| border-sequential-orange-6 | border-color: #ce610f | ||
| border-sequential-orange-7 | border-color: #eb6d05 | ||
| border-sequential-teal-1 | border-color: #004644 | ||
| border-sequential-teal-2 | border-color: #055451 | ||
| border-sequential-teal-3 | border-color: #0b625f | ||
| border-sequential-teal-4 | border-color: #12706d | ||
| border-sequential-teal-5 | border-color: #197f7c | ||
| border-sequential-teal-6 | border-color: #208e8b | ||
| border-sequential-teal-7 | border-color: #279d9a | ||
| border-sequential-blue-1 | border-color: #1e405d | ||
| border-sequential-blue-2 | border-color: #204e73 | ||
| border-sequential-blue-3 | border-color: #205c89 | ||
| border-sequential-blue-4 | border-color: #1f6ba0 | ||
| border-sequential-blue-5 | border-color: #1b7ab7 | ||
| border-sequential-blue-6 | border-color: #1389cf | ||
| border-sequential-blue-7 | border-color: #0099e8 | ||
| border-sequential-purple-1 | border-color: #241a37 | ||
| border-sequential-purple-2 | border-color: #32244d | ||
| border-sequential-purple-3 | border-color: #402e65 | ||
| border-sequential-purple-4 | border-color: #4f397d | ||
| border-sequential-purple-5 | border-color: #5e4397 | ||
| border-sequential-purple-6 | border-color: #6e4fb1 | ||
| border-sequential-purple-7 | border-color: #7e5acc | ||
| border-sequential-pink-1 | border-color: #39121f | ||
| border-sequential-pink-2 | border-color: #51152b | ||
| border-sequential-pink-3 | border-color: #691737 | ||
| border-sequential-pink-4 | border-color: #831644 | ||
| border-sequential-pink-5 | border-color: #9e1451 | ||
| border-sequential-pink-6 | border-color: #b90e5f | ||
| border-sequential-pink-7 | border-color: #d5006d | ||
| border-sequential-grey-0 | border-color: #c6c6c6 |
Typography
White Space
Utilities for controlling an element's white-space property.
| sr-only | white-space: nowrap | |
| not-sr-only | white-space: normal | |
| 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 |
List Style Type
Utilities for controlling the bullet/number style of a list.
| list-none | list-style-type: none | |
| list-disc | list-style-type: disc | |
| list-decimal | list-style-type: decimal |
Text Align
Utilities for controlling the alignment of text.
| text-left | text-align: left | |
| text-center | text-align: center | |
| text-right | text-align: right | |
| text-justify | text-align: justify |
Vertical Align
Utilities for controlling 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 |
Font Family
Utilities for controlling the font family of an element.
| font-rubik | font-family: Rubik,ui-sans-serif,sans-serif | |
| font-mono | font-family: Roboto mono,monospace | |
| font-inherit | font-family: inherit |
Font Size
Utilities for controlling the font size of an element.
| text-display-lg | font-size: 44px | |
| text-display-sm | font-size: 36px | |
| text-title-xl | font-size: 32px | |
| text-title-lg | font-size: 28px | |
| text-title-xs | font-size: 20px | |
| text-big-desc | font-size: 20px | |
| text-display-lg-desktop | font-size: 72px | |
| text-display-sm-desktop | font-size: 48px | |
| text-title-xl-desktop | font-size: 60px | |
| text-title-lg-desktop | font-size: 44px | |
| text-title-md-desktop | font-size: 32px | |
| text-title-sm-desktop | font-size: 24px | |
| text-title-xs-desktop | font-size: 20px | |
| text-big-desc-desktop | font-size: 24px | |
| text-body | font-size: 16px | |
| text-small | font-size: 14px |
Letter Spacing
Utilities for controlling the tracking (letter spacing) of an element.
| text-display-lg | letter-spacing: -1px | |
| text-display-sm | letter-spacing: -1px | |
| text-title-xl | letter-spacing: -1px | |
| text-title-lg | letter-spacing: -1px | |
| text-display-lg-desktop | letter-spacing: -2px | |
| text-display-sm-desktop | letter-spacing: -1px | |
| text-title-xl-desktop | letter-spacing: -1px | |
| text-title-lg-desktop | letter-spacing: -1px | |
| tracking-0 | letter-spacing: 0 | |
| tracking-n1 | letter-spacing: -1px | |
| tracking-n2 | letter-spacing: -2px |
Line Height
Utilities for controlling the leading (line height) of an element.
| text-display-lg | line-height: 48px | |
| text-display-sm | line-height: 40px | |
| text-title-xl | line-height: 36px | |
| text-title-lg | line-height: 32px | |
| text-title-xs | line-height: 24px | |
| text-big-desc | line-height: 28px | |
| text-display-lg-desktop | line-height: 76px | |
| text-display-sm-desktop | line-height: 52px | |
| text-title-xl-desktop | line-height: 64px | |
| text-title-lg-desktop | line-height: 52px | |
| text-title-md-desktop | line-height: 36px | |
| text-title-sm-desktop | line-height: 28px | |
| text-title-xs-desktop | line-height: 24px | |
| text-big-desc-desktop | line-height: 32px | |
| text-body | line-height: 24px | |
| text-small | line-height: 18px |
Font Weight
Utilities for controlling the font weight of an element.
| font-light | font-weight: 300 | |
| font-regular | font-weight: 400 | |
| font-medium | font-weight: 600 |
Text Color
Utilities for controlling the text color of an element.
| inherit | text-inherit | color: inherit | |
| text-none | color: transparent | ||
| text-white | color: #fff | ||
| text-black | color: #212123 | ||
| text-action | color: #495ed4 | ||
| text-blue-1 | color: #edf4f7 | ||
| text-blue-2 | color: #a9d6ea | ||
| text-blue-bright | color: #495ed4 | ||
| text-blue-dark | color: #0c1464 | ||
| text-slate-1 | color: #eff3f4 | ||
| text-slate-2 | color: #5a7a92 | ||
| text-slate-3 | color: #1d4d70 | ||
| text-slate-4 | color: #002b48 | ||
| text-slate | color: #1d4d70 | ||
| text-slate-light | color: #5a7a92 | ||
| text-green-1 | color: #e9f7ec | ||
| text-green-2 | color: #c0e2c5 | ||
| text-green-3 | color: #00866a | ||
| text-green-4 | color: #1b674d | ||
| text-red-1 | color: #f5e9e5 | ||
| text-red-2 | color: #efcabb | ||
| text-red-3 | color: #c55236 | ||
| text-red-4 | color: #9b3921 | ||
| text-purple-1 | color: #edebf6 | ||
| text-purple-2 | color: #cccced | ||
| text-purple-3 | color: #7d61b3 | ||
| text-purple-4 | color: #543a89 | ||
| text-yellow-1 | color: #f8f1df | ||
| text-yellow-2 | color: #f9e3a3 | ||
| text-yellow-3 | color: #f4c435 | ||
| text-yellow-4 | color: #e0a81a | ||
| text-grey-1 | color: #f6f6f6 | ||
| text-grey-2 | color: #e2e2e2 | ||
| text-grey-3 | color: #c2c2c2 | ||
| text-grey-4 | color: #a1a1a1 | ||
| text-grey-dark | color: #424244 | ||
| text-grey-focus | color: #a1a1a1 | ||
| text-sequential-darkBlue-1 | color: #9389ad | ||
| text-sequential-darkBlue-2 | color: #8074a3 | ||
| text-sequential-darkBlue-3 | color: #6e6099 | ||
| text-sequential-darkBlue-4 | color: #5a4d8f | ||
| text-sequential-darkBlue-5 | color: #463a84 | ||
| text-sequential-darkBlue-6 | color: #2f287a | ||
| text-sequential-darkBlue-7 | color: #0d1670 | ||
| text-sequential-orange-1 | color: #472917 | ||
| text-sequential-orange-2 | color: #603418 | ||
| text-sequential-orange-3 | color: #7b3f18 | ||
| text-sequential-orange-4 | color: #964a17 | ||
| text-sequential-orange-5 | color: #b15514 | ||
| text-sequential-orange-6 | color: #ce610f | ||
| text-sequential-orange-7 | color: #eb6d05 | ||
| text-sequential-teal-1 | color: #004644 | ||
| text-sequential-teal-2 | color: #055451 | ||
| text-sequential-teal-3 | color: #0b625f | ||
| text-sequential-teal-4 | color: #12706d | ||
| text-sequential-teal-5 | color: #197f7c | ||
| text-sequential-teal-6 | color: #208e8b | ||
| text-sequential-teal-7 | color: #279d9a | ||
| text-sequential-blue-1 | color: #1e405d | ||
| text-sequential-blue-2 | color: #204e73 | ||
| text-sequential-blue-3 | color: #205c89 | ||
| text-sequential-blue-4 | color: #1f6ba0 | ||
| text-sequential-blue-5 | color: #1b7ab7 | ||
| text-sequential-blue-6 | color: #1389cf | ||
| text-sequential-blue-7 | color: #0099e8 | ||
| text-sequential-purple-1 | color: #241a37 | ||
| text-sequential-purple-2 | color: #32244d | ||
| text-sequential-purple-3 | color: #402e65 | ||
| text-sequential-purple-4 | color: #4f397d | ||
| text-sequential-purple-5 | color: #5e4397 | ||
| text-sequential-purple-6 | color: #6e4fb1 | ||
| text-sequential-purple-7 | color: #7e5acc | ||
| text-sequential-pink-1 | color: #39121f | ||
| text-sequential-pink-2 | color: #51152b | ||
| text-sequential-pink-3 | color: #691737 | ||
| text-sequential-pink-4 | color: #831644 | ||
| text-sequential-pink-5 | color: #9e1451 | ||
| text-sequential-pink-6 | color: #b90e5f | ||
| text-sequential-pink-7 | color: #d5006d | ||
| text-sequential-grey-0 | color: #c6c6c6 | ||
| text-secondary | color: #59595c |
Text Decoration
Utilities for controlling the decoration of text.
| underline | text-decoration: underline | |
| line-through | text-decoration: line-through | |
| no-underline | text-decoration: none |
Font Smoothing
Utilities for controlling the font smoothing of an element.
| antialiased | -webkit-font-smoothing: antialiased | |
| subpixel-antialiased | -webkit-font-smoothing: auto | |
| antialiased | -moz-osx-font-smoothing: grayscale | |
| subpixel-antialiased | -moz-osx-font-smoothing: auto |
Transitions & Animation
Effects
Opacity
Utilities for controlling the opacity of an element.
| opacity-0 | opacity: 0 | |
| opacity-5 | opacity: .05 | |
| opacity-10 | opacity: .1 | |
| opacity-20 | opacity: .2 | |
| opacity-25 | opacity: .25 | |
| opacity-30 | opacity: .3 | |
| opacity-40 | opacity: .4 | |
| opacity-50 | opacity: .5 | |
| opacity-60 | opacity: .6 | |
| opacity-70 | opacity: .7 | |
| opacity-75 | opacity: .75 | |
| opacity-80 | opacity: .8 | |
| opacity-90 | opacity: .9 | |
| opacity-95 | opacity: .95 | |
| opacity-100 | opacity: 1 |
Interactivity
Pointer Events
Utilities for controlling whether an element responds to pointer events.
| pointer-events-none | pointer-events: none | |
| pointer-events-auto | pointer-events: auto |
Cursor
Utilities for controlling the cursor style 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 |
Webkit Appearance
Utilities for suppressing native form control styling.
| appearance-none | -webkit-appearance: none |
Appearance
Utilities for suppressing native form control styling.
| appearance-none | appearance: none |