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; */
 
/*
 * Overflow
 * ----------
 * Utilities for controlling how an element handles content that is too large for the container.
 * By default, only responsive variants are generated for overflow utilities.
 */
 
.overflow-auto       /* overflow: auto; */
.overflow-hidden     /* overflow: hidden; */
.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-visible  /* overflow-x: visible; */
.overflow-y-visible  /* overflow-y: visible; */
.overflow-x-scroll   /* overflow-x: scroll; */
.overflow-y-scroll   /* overflow-y: scroll; */
.scrolling-touch     /* -webkit-overflow-scrolling: touch; */
.scrolling-auto      /* -webkit-overflow-scrolling: auto; */
 
/*
 * Position
 * ----------
 * Utilities for controlling how an element is positioned in the DOM.
 * By default, only responsive variants are generated for position utilities.
 */

.static    /* position: static; */
.fixed     /* position: fixed; */
.absolute  /* position: absolute; */
.relative  /* position: relative; */
.sticky    /* position: sticky; */

/*
 * Top / Right / Bottom / Left
 * ----------
 * Utilities for controlling the placement of positioned elements.
 * By default, only responsive variants are generated for top, right, bottom, left, and inset utilities.
 */

.inset-0       /* top: 0; right: 0; bottom: 0; left: 0; */
.inset-y-0     /* top: 0; bottom: 0; */
.inset-x-0     /* right: 0; left: 0; */
.top-0         /* top: 0; */
.right-0       /* right: 0; */
.bottom-0      /* bottom: 0; */
.left-0        /* left: 0; */
.inset-auto    /* top: auto; right: auto; bottom: auto; left: auto; */
.inset-y-auto  /* top: auto; bottom: auto; */
.inset-x-auto  /* left: auto; right: auto; */
.top-auto      /* top: auto; */
.bottom-auto   /* bottom: auto; */
.left-auto     /* left: auto; */
.right-auto    /* right: auto; */

/*
 * Visibility
 * ----------
 * Utilities for controlling the visibility of an element.
 * By default, only responsive variants are generated for visibility utilities.
 */

.visible    /* visibility: visible; */
.invisible  /* visibility: hidden; */

/*
 * Z-Index
 * ----------
 * Utilities for controlling the stack order of an element.
 * By default, only responsive variants are generated for z-index utilities.
 */

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

/* *******************************************************************************************
 * FLEXBOX
 * ******************************************************************************************* */
 
/*
 * Flex Direction
 * ----------
 * Utilities for controlling the direction of flex items.
 * By default, only responsive variants are generated for flex-direction utilities.
 */

.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.
 * By default, only responsive variants are generated for flex-wrap utilities.
 */

.flex-no-wrap       /* flex-wrap: nowrap; */
.flex-wrap          /* flex-wrap: wrap; */
.flex-wrap-reverse  /* flex-wrap: wrap-reverse; */

/*
 * Align Items
 * ----------
 * 
 * 
 */
 
/*
 * Align Content
 * ----------
 * 
 * 
 */
 
/*
 * Align Self
 * ----------
 * 
 * 
 */
 
/*
 * Justify Content
 * ----------
 * 
 * 
 */
 
/*
 * Flex
 * ----------
 * 
 * 
 */
 
/*
 * Flex Grow
 * ----------
 * 
 * 
 */
 
/*
 * Flex Shrink
 * ----------
 * 
 * 
 */
 
/*
 * Order
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * GRID
 * ******************************************************************************************* */
 
/*
 * Grid Template Columns
 * ----------
 * 
 * 
 */
 
/*
 * Grid Column Start / End
 * ----------
 * 
 * 
 */
 
/*
 * Grid Template Rows
 * ----------
 * 
 * 
 */
 
/*
 * Grid Row Start / End
 * ----------
 * 
 * 
 */
 
/*
 * Gap
 * ----------
 * 
 * 
 */
 
/*
 * Grid Auto Flow
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * SPACING
 * ******************************************************************************************* */
 
/*
 * Padding
 * ----------
 * 
 * 
 */
 
/*
 * Margin
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * SIZING
 * ******************************************************************************************* */
 
/*
 * Width
 * ----------
 * 
 * 
 */
 
/*
 * Min-Width
 * ----------
 * 
 * 
 */
 
/*
 * Max-Width
 * ----------
 * 
 * 
 */
 
/*
 * Height
 * ----------
 * 
 * 
 */
 
/*
 * Min-Height
 * ----------
 * 
 * 
 */
 
/*
 * Max-Height
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * TYPOGRAPHY
 * ******************************************************************************************* */
 
/*
 * Font Family
 * ----------
 * 
 * 
 */
 
/*
 * Font Size
 * ----------
 * 
 * 
 */
 
/*
 * Font Smoothing
 * ----------
 * 
 * 
 */
 
/*
 * Font Style
 * ----------
 * 
 * 
 */
 
/*
 * Font Weight
 * ----------
 * 
 * 
 */
 
/*
 * Letter Spacing
 * ----------
 * 
 * 
 */
 
/*
 * Line Height
 * ----------
 * 
 * 
 */
 
/*
 * List Style Type
 * ----------
 * 
 * 
 */
 
/*
 * List Style Position
 * ----------
 * 
 * 
 */
 
/*
 * Placeholder Color
 * ----------
 * 
 * 
 */
 
/*
 * Text Align
 * ----------
 * 
 * 
 */
 
 
/*
 * Text Color
 * ----------
 * 
 * 
 */
 
/*
 * Text Decoration
 * ----------
 * 
 * 
 */
 
/*
 * Text Transform
 * ----------
 * 
 * 
 */
 
/*
 * Vertical Align
 * ----------
 * 
 * 
 */
 
/*
 * Whitespace
 * ----------
 * 
 * 
 */
 
 
/*
 * Word Break
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * BACKGROUNDS
 * ******************************************************************************************* */
 
/*
 * BACKGROUND ATTACHMENT
 * ----------
 * 
 * 
 */
 
/*
 * BACKGROUND COLOR
 * ----------
 * 
 * 
 */
 
/*
 * BACKGROUND POSITION
 * ----------
 * 
 * 
 */
 
/*
 * BACKGROUND REPEAT
 * ----------
 * 
 * 
 */
 
/*
 * BACKGROUND SIZE
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * BORDERS
 * ******************************************************************************************* */
 
/*
 * BORDER COLOR
 * ----------
 * 
 * 
 */
 
/*
 * BORDER STYLE
 * ----------
 * 
 * 
 */
 
/*
 * BORDER WIDTH
 * ----------
 * 
 * 
 */
 
/*
 * BORDER RADIUS
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * TABLES
 * ******************************************************************************************* */
 
/*
 * BORDER COLLAPSE
 * ----------
 * 
 * 
 */
 
/*
 * TABLE LAYOUT
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * EFFECTS
 * ******************************************************************************************* */
 
/*
 * BOX SHADOW
 * ----------
 * 
 * 
 */
 
 
/*
 * OPACITY
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * TRANSITIONS
 * ******************************************************************************************* */
 
/*
 * TRANSITION PROPERTY
 * ----------
 * 
 * 
 */
 
/*
 * TRANSITION DURATION
 * ----------
 * 
 * 
 */
 
/*
 * TRANSITION TIMING FUNCTION
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * TRANSFORMS
 * ******************************************************************************************* */
 
/*
 * SCALE
 * ----------
 * 
 * 
 */
 
/*
 * ROTATE
 * ----------
 * 
 * 
 */
 
/*
 * TRANSLATE
 * ----------
 * 
 * 
 */
 
/*
 * SKEW
 * ----------
 * 
 * 
 */
 
/*
 * TRANSFORM ORIGIN
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * INTERACTIVITY
 * ******************************************************************************************* */
 
/*
 * APPEARANCE
 * ----------
 * 
 * 
 */
 
/*
 * CURSOR
 * ----------
 * 
 * 
 */
 
/*
 * OUTLINE
 * ----------
 * 
 * 
 */
 
/*
 * POINTER EVENTS
 * ----------
 * 
 * 
 */
 
/*
 * RESIZE
 * ----------
 * 
 * 
 */
 
/*
 * USER SELECT
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * SVG
 * ******************************************************************************************* */
 
/*
 * FILL
 * ----------
 * 
 * 
 */
 
/*
 * STROKE
 * ----------
 * 
 * 
 */
 
/*
 * STROKE WIDTH
 * ----------
 * 
 * 
 */
 
/* *******************************************************************************************
 * ACCESSIBILITY
 * ******************************************************************************************* */
 
/*
 * SCREEN READERS
 * ----------
 * 
 * 
 */