knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-06-22 05:04:44 +00:00
Code Issues Releases Activity

docs(tailwind): top right bottom left

Browse Source
This commit is contained in:
Julien Le Coupanec 2020-03-29 12:51:33 +02:00
parent 47a5e3cb7b
commit 43f33e5ac0
1 changed files with 556 additions and 541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
frontend/tailwind.css
View File

@ -24,7 +24,7 @@
.container .container
/* /*
* Box-sizing * Box-sizing
* ---------- * ----------
* Utilities for controlling how the browser should calculate an element's total size. * Utilities for controlling how the browser should calculate an element's total size.
@ -34,7 +34,7 @@
.box-border /* box-sizing: border-box; */ .box-border /* box-sizing: border-box; */
.box-content /* box-sizing: content-box; */ .box-content /* box-sizing: content-box; */
/* /*
* Display * Display
* ---------- * ----------
* Utilities for controlling the display box type of an element. * Utilities for controlling the display box type of an element.
@ -58,7 +58,7 @@
.table-row-group /* display: table-row-group; */ .table-row-group /* display: table-row-group; */
.table-row /* display: table-row; */ .table-row /* display: table-row; */
/* /*
* Floats * Floats
* ---------- * ----------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
@ -70,7 +70,7 @@
.float-none /* float: none; */ .float-none /* float: none; */
.clearfix /* &::after { content: ""; display: table; clear: both; } */ .clearfix /* &::after { content: ""; display: table; clear: both; } */
/* /*
* Clear * Clear
* ---------- * ----------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
@ -81,7 +81,7 @@
.clear-right /* clear: right; */ .clear-right /* clear: right; */
.clear-both /* clear: both; */ .clear-both /* clear: both; */
/* /*
* Object Fit * Object Fit
* ---------- * ----------
* Utilities for controlling how a replaced element's content should be resized. * Utilities for controlling how a replaced element's content should be resized.
@ -94,66 +94,81 @@
.object-none /* object-fit: none; */ .object-none /* object-fit: none; */
.object-scale-down /* object-fit: scale-down; */ .object-scale-down /* object-fit: scale-down; */
/* /*
* Object Position * Object Position
* ---------- * ----------
* Utilities for controlling how a replaced element's content should be positioned within its container. * 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. * By default, only responsive variants are generated for object position utilities.
*/ */
.object-bottom /* object-position: bottom; */ .object-bottom /* object-position: bottom; */
.object-center /* object-position: center; */ .object-center /* object-position: center; */
.object-left /* object-position: left; */ .object-left /* object-position: left; */
.object-left-bottom /* object-position: left bottom; */ .object-left-bottom /* object-position: left bottom; */
.object-left-top /* object-position: left top; */ .object-left-top /* object-position: left top; */
.object-right /* object-position: right; */ .object-right /* object-position: right; */
.object-right-bottom /* object-position: right bottom; */ .object-right-bottom /* object-position: right bottom; */
.object-right-top /* object-position: right top; */ .object-right-top /* object-position: right top; */
.object-top /* object-position: top; */ .object-top /* object-position: top; */
/* /*
* Overflow * Overflow
* ---------- * ----------
* Utilities for controlling how an element handles content that is too large for the container. * 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. * By default, only responsive variants are generated for overflow utilities.
*/ */
.overflow-auto /* overflow: auto; */ .overflow-auto /* overflow: auto; */
.overflow-hidden /* overflow: hidden; */ .overflow-hidden /* overflow: hidden; */
.overflow-visible /* overflow: visible; */ .overflow-visible /* overflow: visible; */
.overflow-scroll /* overflow: scroll; */ .overflow-scroll /* overflow: scroll; */
.overflow-x-auto /* overflow-x: auto; */ .overflow-x-auto /* overflow-x: auto; */
.overflow-y-auto /* overflow-y: auto; */ .overflow-y-auto /* overflow-y: auto; */
.overflow-x-hidden /* overflow-x: hidden; */ .overflow-x-hidden /* overflow-x: hidden; */
.overflow-y-hidden /* overflow-y: hidden; */ .overflow-y-hidden /* overflow-y: hidden; */
.overflow-x-visible /* overflow-x: visible; */ .overflow-x-visible /* overflow-x: visible; */
.overflow-y-visible /* overflow-y: visible; */ .overflow-y-visible /* overflow-y: visible; */
.overflow-x-scroll /* overflow-x: scroll; */ .overflow-x-scroll /* overflow-x: scroll; */
.overflow-y-scroll /* overflow-y: scroll; */ .overflow-y-scroll /* overflow-y: scroll; */
.scrolling-touch /* -webkit-overflow-scrolling: touch; */ .scrolling-touch /* -webkit-overflow-scrolling: touch; */
.scrolling-auto /* -webkit-overflow-scrolling: auto; */ .scrolling-auto /* -webkit-overflow-scrolling: auto; */
/* /*
* Position * Position
* ---------- * ----------
* Utilities for controlling how an element is positioned in the DOM. * Utilities for controlling how an element is positioned in the DOM.
* By default, only responsive variants are generated for position utilities. * By default, only responsive variants are generated for position utilities.
*/ */
.static /* position: static; */ .static /* position: static; */
.fixed /* position: fixed; */ .fixed /* position: fixed; */
.absolute /* position: absolute; */ .absolute /* position: absolute; */
.relative /* position: relative; */ .relative /* position: relative; */
.sticky /* position: sticky; */ .sticky /* position: sticky; */
/* /*
* Top / Right / Bottom / Left * 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 * Visibility
* ---------- * ----------
* *
@ -161,7 +176,7 @@
*/ */
/* /*
* Z-Index * Z-Index
* ---------- * ----------
* *
@ -169,265 +184,265 @@
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* FLEXBOX * FLEXBOX
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Flex Direction * Flex Direction
* ---------- * ----------
* *
* *
*/ */
/* /*
* Flex Wrap * Flex Wrap
* ---------- * ----------
* *
* *
*/ */
/* /*
* Align Items * Align Items
* ---------- * ----------
* *
* *
*/ */
/* /*
* Align Content * Align Content
* ---------- * ----------
* *
* *
*/ */
/* /*
* Align Self * Align Self
* ---------- * ----------
* *
* *
*/ */
/* /*
* Justify Content * Justify Content
* ---------- * ----------
* *
* *
*/ */
/* /*
* Flex * Flex
* ---------- * ----------
* *
* *
*/ */
/* /*
* Flex Grow * Flex Grow
* ---------- * ----------
* *
* *
*/ */
/* /*
* Flex Shrink * Flex Shrink
* ---------- * ----------
* *
* *
*/ */
/* /*
* Order * Order
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* GRID * GRID
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Grid Template Columns * Grid Template Columns
* ---------- * ----------
* *
* *
*/ */
/* /*
* Grid Column Start / End * Grid Column Start / End
* ---------- * ----------
* *
* *
*/ */
/* /*
* Grid Template Rows * Grid Template Rows
* ---------- * ----------
* *
* *
*/ */
/* /*
* Grid Row Start / End * Grid Row Start / End
* ---------- * ----------
* *
* *
*/ */
/* /*
* Gap * Gap
* ---------- * ----------
* *
* *
*/ */
/* /*
* Grid Auto Flow * Grid Auto Flow
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* SPACING * SPACING
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Padding * Padding
* ---------- * ----------
* *
* *
*/ */
/* /*
* Margin * Margin
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* SIZING * SIZING
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Width * Width
* ---------- * ----------
* *
* *
*/ */
/* /*
* Min-Width * Min-Width
* ---------- * ----------
* *
* *
*/ */
/* /*
* Max-Width * Max-Width
* ---------- * ----------
* *
* *
*/ */
/* /*
* Height * Height
* ---------- * ----------
* *
* *
*/ */
/* /*
* Min-Height * Min-Height
* ---------- * ----------
* *
* *
*/ */
/* /*
* Max-Height * Max-Height
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* TYPOGRAPHY * TYPOGRAPHY
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Font Family * Font Family
* ---------- * ----------
* *
* *
*/ */
/* /*
* Font Size * Font Size
* ---------- * ----------
* *
* *
*/ */
/* /*
* Font Smoothing * Font Smoothing
* ---------- * ----------
* *
* *
*/ */
/* /*
* Font Style * Font Style
* ---------- * ----------
* *
* *
*/ */
/* /*
* Font Weight * Font Weight
* ---------- * ----------
* *
* *
*/ */
/* /*
* Letter Spacing * Letter Spacing
* ---------- * ----------
* *
* *
*/ */
/* /*
* Line Height * Line Height
* ---------- * ----------
* *
* *
*/ */
/* /*
* List Style Type * List Style Type
* ---------- * ----------
* *
* *
*/ */
/* /*
* List Style Position * List Style Position
* ---------- * ----------
* *
* *
*/ */
/* /*
* Placeholder Color * Placeholder Color
* ---------- * ----------
* *
* *
*/ */
/* /*
* Text Align * Text Align
* ---------- * ----------
* *
@ -435,35 +450,35 @@
*/ */
/* /*
* Text Color * Text Color
* ---------- * ----------
* *
* *
*/ */
/* /*
* Text Decoration * Text Decoration
* ---------- * ----------
* *
* *
*/ */
/* /*
* Text Transform * Text Transform
* ---------- * ----------
* *
* *
*/ */
/* /*
* Vertical Align * Vertical Align
* ---------- * ----------
* *
* *
*/ */
/* /*
* Whitespace * Whitespace
* ---------- * ----------
* *
@ -471,107 +486,107 @@
*/ */
/* /*
* Word Break * Word Break
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* BACKGROUNDS * BACKGROUNDS
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* BACKGROUND ATTACHMENT * BACKGROUND ATTACHMENT
* ---------- * ----------
* *
* *
*/ */
/* /*
* BACKGROUND COLOR * BACKGROUND COLOR
* ---------- * ----------
* *
* *
*/ */
/* /*
* BACKGROUND POSITION * BACKGROUND POSITION
* ---------- * ----------
* *
* *
*/ */
/* /*
* BACKGROUND REPEAT * BACKGROUND REPEAT
* ---------- * ----------
* *
* *
*/ */
/* /*
* BACKGROUND SIZE * BACKGROUND SIZE
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* BORDERS * BORDERS
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* BORDER COLOR * BORDER COLOR
* ---------- * ----------
* *
* *
*/ */
/* /*
* BORDER STYLE * BORDER STYLE
* ---------- * ----------
* *
* *
*/ */
/* /*
* BORDER WIDTH * BORDER WIDTH
* ---------- * ----------
* *
* *
*/ */
/* /*
* BORDER RADIUS * BORDER RADIUS
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* TABLES * TABLES
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* BORDER COLLAPSE * BORDER COLLAPSE
* ---------- * ----------
* *
* *
*/ */
/* /*
* TABLE LAYOUT * TABLE LAYOUT
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* EFFECTS * EFFECTS
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* BOX SHADOW * BOX SHADOW
* ---------- * ----------
* *
@ -579,153 +594,153 @@
*/ */
/* /*
* OPACITY * OPACITY
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* TRANSITIONS * TRANSITIONS
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* TRANSITION PROPERTY * TRANSITION PROPERTY
* ---------- * ----------
* *
* *
*/ */
/* /*
* TRANSITION DURATION * TRANSITION DURATION
* ---------- * ----------
* *
* *
*/ */
/* /*
* TRANSITION TIMING FUNCTION * TRANSITION TIMING FUNCTION
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* TRANSFORMS * TRANSFORMS
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* SCALE * SCALE
* ---------- * ----------
* *
* *
*/ */
/* /*
* ROTATE * ROTATE
* ---------- * ----------
* *
* *
*/ */
/* /*
* TRANSLATE * TRANSLATE
* ---------- * ----------
* *
* *
*/ */
/* /*
* SKEW * SKEW
* ---------- * ----------
* *
* *
*/ */
/* /*
* TRANSFORM ORIGIN * TRANSFORM ORIGIN
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* INTERACTIVITY * INTERACTIVITY
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* APPEARANCE * APPEARANCE
* ---------- * ----------
* *
* *
*/ */
/* /*
* CURSOR * CURSOR
* ---------- * ----------
* *
* *
*/ */
/* /*
* OUTLINE * OUTLINE
* ---------- * ----------
* *
* *
*/ */
/* /*
* POINTER EVENTS * POINTER EVENTS
* ---------- * ----------
* *
* *
*/ */
/* /*
* RESIZE * RESIZE
* ---------- * ----------
* *
* *
*/ */
/* /*
* USER SELECT * USER SELECT
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* SVG * SVG
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* FILL * FILL
* ---------- * ----------
* *
* *
*/ */
/* /*
* STROKE * STROKE
* ---------- * ----------
* *
* *
*/ */
/* /*
* STROKE WIDTH * STROKE WIDTH
* ---------- * ----------
* *
* *
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* ACCESSIBILITY * ACCESSIBILITY
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* SCREEN READERS * SCREEN READERS
* ---------- * ----------
* *