awesome-cheatsheets/frontend/tailwind.css

/* *******************************************************************************************
 * TAILWIND.CSS
 * DOCUMENTATION: https://tailwindcss.com/
 * ******************************************************************************************* */

/*
 * Available breakpoints
 * ----------
 * sm: min-width: 640px;
 * md: min-width: 768px;
 * lg: min-width: 1024px;
 * xl: min-width: 1280px;
 */

 /* *******************************************************************************************
 * LAYOUT
 * ******************************************************************************************* */

/*
 * Container
 * ----------
 * A component for fixing an element's width to the current breakpoint.
 */

.container

/*
 * Box-sizing
 * ----------
 * Utilities for controlling how the browser should calculate an element's total size.
 * By default, only responsive variants are generated for box-sizing utilities.
 */

.box-border   /* box-sizing: border-box; */
.box-content  /* box-sizing: content-box; */

/*
 * Display
 * ----------
 * Utilities for controlling the display box type of an element.
 * By default, only responsive variants are generated for display utilities.
 */

.hidden              /* display: none; */
.block               /* display: block; */
.inline-block        /* display: inline-block; */
.inline              /* display: inline; */
.flex                /* display: flex; */
.inline-flex         /* display: inline-flex; */
.grid                /* display: grid; */
.table               /* display: 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; */

/*
 * Floats
 * ----------
 * Utilities for controlling the wrapping of content around an element.
 * By default, only responsive variants are generated for float utilities.
 */

.float-right  /* float: right; */
.float-left   /* float: left; */
.float-none   /* float: none; */
.clearfix     /* &::after { content: ""; display: table; clear: both; } */

/*
 * Clear
 * ----------
 * Utilities for controlling the wrapping of content around an element.
 * By default, only responsive variants are generated for clear utilities.
 */

.clear-left   /* clear: left; */
.clear-right  /* clear: right; */
.clear-both   /* clear: both; */

/*
 * Object Fit
 * ----------
 * Utilities for controlling how a replaced element's content should be resized.
 * By default, only responsive variants are generated for object-fit utilities.
 */

.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
 * ----------
 * Utilities for controlling how a replaced element's content should be positioned within its container.
 * By default, only responsive variants are generated for object position utilities.
 */

.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; */