# Tailwind CSS Cheat Sheet

A comprehensive [Tailwind CSS](/content/tailwind/tutorial/index.html) cheat sheet to instantly find all utility classes and their CSS properties in one place.

500k+ developers use Kombai to ship frontend faster

## aspect-ratio

The aspect-ratio utility sets element's intrinsic width-to-height ratio, ensuring responsive media sizing while maintaining layout integrity.

- aspect-<ratio>
- aspect-ratio: <ratio>;
- aspect-square
- aspect-ratio: 1 / 1;
- aspect-video
- aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */
- aspect-auto
- aspect-ratio: auto;
- aspect-(<custom-property>)
- aspect-ratio: var(<custom-property>);
- aspect-\[<value>\]
- aspect-ratio: <value>;

## columns

The columns utility defines the number of equal-width columns in a container, facilitating complex grid layouts and responsive designs.

- columns-<number>
- columns: <number>;
- columns-3xs
- columns: var(--container-3xs); /* 16rem (256px) */
- columns-2xs
- columns: var(--container-2xs); /* 18rem (288px) */
- columns-xs
- columns: var(--container-xs); /* 20rem (320px) */
- columns-sm
- columns: var(--container-sm); /* 24rem (384px) */
- columns-md
- columns: var(--container-md); /* 28rem (448px) */
- columns-lg
- columns: var(--container-lg); /* 32rem (512px) */
- columns-xl
- columns: var(--container-xl); /* 36rem (576px) */
- columns-2xl
- columns: var(--container-2xl); /* 42rem (672px) */
- columns-3xl
- columns: var(--container-3xl); /* 48rem (768px) */
- columns-4xl
- columns: var(--container-4xl); /* 56rem (896px) */
- columns-5xl
- columns: var(--container-5xl); /* 64rem (1024px) */
- columns-6xl
- columns: var(--container-6xl); /* 72rem (1152px) */
- columns-7xl
- columns: var(--container-7xl); /* 80rem (1280px) */
- columns-auto
- columns: auto;
- columns-(<custom-property>)
- columns: var(<custom-property>);
- columns-\[<value>\]
- columns: <value>;

## break-after

The break-after utilities manage page break behavior after elements, ensuring controlled content flow when printing complex documents or reports.

- 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

The break-before utilities control page-break behavior before elements, ideal for printing or dividing content sections cleanly in layouts.

- 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

The break-inside utility manages item break behavior in multi-column containers, preventing unwanted column breaks for cleaner, organized layouts.

- break-inside-auto
- break-inside: auto;
- break-inside-avoid
- break-inside: avoid;
- break-inside-avoid-page
- break-inside: avoid-page;
- break-inside-avoid-column
- break-inside: avoid-column;

## box-decoration-break

The Box Decoration Break utilities control box decoration behavior across lines in multi-line text, enhancing design flexibility and aesthetics.

- box-decoration-clone
- box-decoration-break: clone
- box-decoration-slice
- box-decoration-break: slice

## box-sizing

The box-sizing utility configures element sizing to include padding and borders, ensuring consistent layout dimensions across responsive web designs.

- box-border
- box-sizing: border-box
- box-content
- box-sizing: content-box

## display

The display utilities control element visibility, allowing for toggling between block, inline, and hidden states for responsive design.

- inline
- display: inline;
- block
- display: block;
- inline-block
- display: inline-block;
- flow-root
- display: flow-root;
- flex
- display: flex;
- inline-flex
- display: inline-flex;
- grid
- display: grid;
- inline-grid
- display: inline-grid;
- contents
- display: contents;
- 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;
- list-item
- display: list-item;
- hidden
- display: none;
- sr-only
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border-width: 0;

## float

The float utility manages element positioning by floating them left or right, facilitating responsive text wrapping and layout designs.

- float-right
- float: right;
- float-left
- float: left;
- float-start
- float: inline-start;
- float-end
- float: inline-end;
- float-none
- float: none;

## clear

The clear utility manages elements' float clearing, ensuring proper layout structure by preventing wrapping issues caused by floated siblings.

- clear-left
- clear: left;
- clear-right
- clear: right;
- clear-both
- clear: both;
- clear-start
- clear: inline-start;
- clear-end
- clear: inline-end;
- clear-none
- clear: none;

## isolation

The isolation utility manages stacking contexts, preventing element overlap issues, crucial for creating visually complex layouts without z-index conflicts.

- isolate
- isolation: isolate;
- isolation-auto
- isolation: auto;

## object-fit

The object-fit utility alters content fitting within containers, ensuring images or videos maintain aspect ratios without distortion when resizing.

- 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

The object-position utility precisely positions replaced elements within their container, commonly used for controlling images and videos alignment.

- 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;
- object-(<custom-property>)
- object-position: var(<custom-property>);
- object-\[<value>\]
- object-position: <value>;

## overflow

The overflow utility manages content overflow in containers, ensuring visibility or scrolling for clipped content, enhancing layout control and accessibility.

- overflow-auto
- overflow: auto;
- overflow-hidden
- overflow: hidden;
- overflow-clip
- overflow: clip;
- overflow-visible
- overflow: visible;
- overflow-scroll
- overflow: scroll;
- overflow-x-auto
- overflow-x: auto;
- overflow-y-auto
- overflow-y: auto;
- overflow-x-hidden
- overflow-x: hidden;
- overflow-y-hidden
- overflow-y: hidden;
- overflow-x-clip
- overflow-x: clip;
- overflow-y-clip
- overflow-y: clip;
- overflow-x-visible
- overflow-x: visible;
- overflow-y-visible
- overflow-y: visible;
- overflow-x-scroll
- overflow-x: scroll;
- overflow-y-scroll
- overflow-y: scroll;

## overscroll-behavior

The overscroll behavior utility manages scroll boundary effects, preventing scroll chaining for improved control over nested scrollable elements.

- overscroll-auto
- overscroll-behavior: auto;
- overscroll-contain
- overscroll-behavior: contain;
- overscroll-none
- overscroll-behavior: none;
- overscroll-x-auto
- overscroll-behavior-x: auto;
- overscroll-x-contain
- overscroll-behavior-x: contain;
- overscroll-x-none
- overscroll-behavior-x: none;
- overscroll-y-auto
- overscroll-behavior-y: auto;
- overscroll-y-contain
- overscroll-behavior-y: contain;
- overscroll-y-none
- overscroll-behavior-y: none;

## position

The position utilities control element positioning with classes like static, relative, absolute, fixed, and sticky, allowing flexible layout adjustments.

- static
- position: static;
- fixed
- position: fixed;
- absolute
- position: absolute;
- relative
- position: relative;
- sticky
- position: sticky;

## top / right / bottom / left

The Top utility adjusts element's top position, enabling precise placement within containers for custom layouts and responsive designs.

The Right utility modifies element's right position, allowing dynamic adjustment and alignment to achieve specific layout requirements.

The Bottom utility sets element's bottom position, facilitating tailored positioning for improved control in aligning elements within layouts.

The Left utility changes element's left position, offering flexibility to position elements accurately for various layout configurations.

- inset-<number>
- inset: calc(var(--spacing) * <number>);
- -inset-<number>
- inset: calc(var(--spacing) * -<number>);
- inset-<fraction>
- inset: calc(<fraction> * 100%);
- -inset-<fraction>
- inset: calc(<fraction> * -100%);
- inset-px
- inset: 1px;
- -inset-px
- inset: -1px;
- inset-full
- inset: 100%;
- -inset-full
- inset: -100%;
- inset-auto
- inset: auto;
- inset-(<custom-property>)
- inset: var(<custom-property>);
- inset-\[<value>\]
- inset: <value>;
- inset-x-<number>
- inset-inline: calc(var(--spacing) * <number>);
- -inset-x-<number>
- inset-inline: calc(var(--spacing) * -<number>);
- inset-x-<fraction>
- inset-inline: calc(<fraction> * 100%);
- -inset-x-<fraction>
- inset-inline: calc(<fraction> * -100%);
- inset-x-px
- inset-inline: 1px;
- -inset-x-px
- inset-inline: -1px;
- inset-x-full
- inset-inline: 100%;
- -inset-x-full
- inset-inline: -100%;
- inset-x-auto
- inset-inline: auto;
- inset-x-(<custom-property>)
- inset-inline: var(<custom-property>);
- inset-x-\[<value>\]
- inset-inline: <value>;
- inset-y-<number>
- inset-block: calc(var(--spacing) * <number>);
- -inset-y-<number>
- inset-block: calc(var(--spacing) * -<number>);
- inset-y-<fraction>
- inset-block: calc(<fraction> * 100%);
- -inset-y-<fraction>
- inset-block: calc(<fraction> * -100%);
- inset-y-px
- inset-block: 1px;
- -inset-y-px
- inset-block: -1px;
- inset-y-full
- inset-block: 100%;
- -inset-y-full
- inset-block: -100%;
- inset-y-auto
- inset-block: auto;
- inset-y-(<custom-property>)
- inset-block: var(<custom-property>);
- inset-y-\[<value>\]
- inset-block: <value>;
- start-<number>
- inset-inline-start: calc(var(--spacing) * <number>);
- -start-<number>
- inset-inline-start: calc(var(--spacing) * -<number>);
- start-<fraction>
- inset-inline-start: calc(<fraction> * 100%);
- -start-<fraction>
- inset-inline-start: calc(<fraction> * -100%);
- start-px
- inset-inline-start: 1px;
- -start-px
- inset-inline-start: -1px;
- start-full
- inset-inline-start: 100%;
- -start-full
- inset-inline-start: -100%;
- start-auto
- inset-inline-start: auto;
- start-(<custom-property>)
- inset-inline-start: var(<custom-property>);
- start-\[<value>\]
- inset-inline-start: <value>;
- end-<number>
- inset-inline-end: calc(var(--spacing) * <number>);
- -end-<number>
- inset-inline-end: calc(var(--spacing) * -<number>);
- end-<fraction>
- inset-inline-end: calc(<fraction> * 100%);
- -end-<fraction>
- inset-inline-end: calc(<fraction> * -100%);
- end-px
- inset-inline-end: 1px;
- -end-px
- inset-inline-end: -1px;
- end-full
- inset-inline-end: 100%;
- -end-full
- inset-inline-end: -100%;
- end-auto
- inset-inline-end: auto;
- end-(<custom-property>)
- inset-inline-end: var(<custom-property>);
- end-\[<value>\]
- inset-inline-end: <value>;
- top-<number>
- top: calc(var(--spacing) * <number>);
- -top-<number>
- top: calc(var(--spacing) * -<number>);
- top-<fraction>
- top: calc(<fraction> * 100%);
- -top-<fraction>
- top: calc(<fraction> * -100%);
- top-px
- top: 1px;
- -top-px
- top: -1px;
- top-full
- top: 100%;
- -top-full
- top: -100%;
- top-auto
- top: auto;
- top-(<custom-property>)
- top: var(<custom-property>);
- top-\[<value>\]
- top: <value>;
- right-<number>
- right: calc(var(--spacing) * <number>);
- -right-<number>
- right: calc(var(--spacing) * -<number>);
- right-<fraction>
- right: calc(<fraction> * 100%);
- -right-<fraction>
- right: calc(<fraction> * -100%);
- right-px
- right: 1px;
- -right-px
- right: -1px;
- right-full
- right: 100%;
- -right-full
- right: -100%;
- right-auto
- right: auto;
- right-(<custom-property>)
- right: var(<custom-property>);
- right-\[<value>\]
- right: <value>;
- bottom-<number>
- bottom: calc(var(--spacing) * <number>);
- -bottom-<number>
- bottom: calc(var(--spacing) * -<number>);
- bottom-<fraction>
- bottom: calc(<fraction> * 100%);
- -bottom-<fraction>
- bottom: calc(<fraction> * -100%);
- bottom-px
- bottom: 1px;
- -bottom-px
- bottom: -1px;
- bottom-full
- bottom: 100%;
- -bottom-full
- bottom: -100%;
- bottom-auto
- bottom: auto;
- bottom-(<custom-property>)
- bottom: var(<custom-property>);
- bottom-\[<value>\]
- bottom: <value>;
- left-<number>
- left: calc(var(--spacing) * <number>);
- -left-<number>
- left: calc(var(--spacing) * -<number>);
- left-<fraction>
- left: calc(<fraction> * 100%);
- -left-<fraction>
- left: calc(<fraction> * -100%);
- left-px
- left: 1px;
- -left-px
- left: -1px;
- left-full
- left: 100%;
- -left-full
- left: -100%;
- left-auto
- left: auto;
- left-(<custom-property>)
- left: var(<custom-property>);
- left-\[<value>\]
- left: <value>;

## visibility

The visibility utility manages element visibility, toggling between visible and hidden states to control element display in different contexts.

- visible
- visibility: visible;
- invisible
- visibility: hidden;
- collapse
- visibility: collapse;

## z-index

Z-Index utilities manage element stacking order in CSS, enhancing layout visibility and control in layered content scenarios.

- z-<number>
- z-index: <number>;
- z-auto
- z-index: auto;
- z-\[<value>\]
- z-index: <value>;