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

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

.container

/*
 * none: width: 100%;
 * sm:   max-width: 640px;
 * md:   max-width: 768px;
 * lg:   max-width: 1024px;
 * xl:   max-width: 1280px;
 */

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