layout.md

Tailwind Layout

• Tailwind Layout
  • Container
  • Box Sizing
  • Display
  • Float
  • Clear
  • Clear
  • Object Fit
  • Object Position
  • Overflow
  • Position
  • Top / Right / Bottom / Left
  • Visibility
  • Z-Index

Container

Snippet	Purpose
container	A component for fixing an element's width to the current breakpoint

Box Sizing

Snippet	Purpose
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

Display

Snippet	Purpose
hidden	display: none;
block	display: block;
flow-root	display: flow-root;
inline-block	display: inline-block;
inline	display: inline;
flex	display: flex;
inline-flex	display: inline-flex;
grid	display: grid;
inline-grid	display: inline-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;

Float

Snippet	Purpose
float-right	float: right;
float-left	float: left;
float-none	float: none;
clearfix	&::after { content: "": display: table; clear: both; }

Clear

Snippet	Purpose
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

Clear

Snippet	Purpose
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

Object Fit

Snippet	Purpose
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

Snippet	Purpose
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

Snippet	Purpose
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-visibl	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

Snippet	Purpose
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

Top / Right / Bottom / Left

Snippet	Purpose
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

Snippet	Purpose
visible	visibility: visible;
invisible	visibility: hidden;

Z-Index

Snippet	Purpose
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;