knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-12-20 01:03:14 +00:00
Code Issues Releases Activity

docs(tailwind): add structure

Browse Source
This commit is contained in:
Julien Le Coupanec 2020-03-29 12:34:47 +02:00
parent 8c35714275
commit 56229c1a46
1 changed files with 707 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

819
frontend/tailwind.css
View File

@ -12,9 +12,9 @@
* xl: min-width: 1280px; * xl: min-width: 1280px;
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* LAYOUT * LAYOUT
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Container * Container
@ -22,113 +22,708 @@
* A component for fixing an element's width to the current breakpoint. * A component for fixing an element's width to the current breakpoint.
*/ */
.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.
* By default, only responsive variants are generated for box-sizing utilities. * By default, only responsive variants are generated for box-sizing utilities.
*/ */
.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.
* By default, only responsive variants are generated for display utilities. * By default, only responsive variants are generated for display utilities.
*/ */
.hidden /* display: none; */ .hidden /* display: none; */
.block /* display: block; */ .block /* display: block; */
.inline-block /* display: inline-block; */ .inline-block /* display: inline-block; */
.inline /* display: inline; */ .inline /* display: inline; */
.flex /* display: flex; */ .flex /* display: flex; */
.inline-flex /* display: inline-flex; */ .inline-flex /* display: inline-flex; */
.grid /* display: grid; */ .grid /* display: grid; */
.table /* display: table; */ .table /* display: table; */
.table-caption /* display: table-caption; */ .table-caption /* display: table-caption; */
.table-cell /* display: table-cell; */ .table-cell /* display: table-cell; */
.table-column /* display: table-column; */ .table-column /* display: table-column; */
.table-column-group /* display: table-column-group; */ .table-column-group /* display: table-column-group; */
.table-footer-group /* display: table-footer-group; */ .table-footer-group /* display: table-footer-group; */
.table-header-group /* display: table-header-group; */ .table-header-group /* display: table-header-group; */
.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.
* By default, only responsive variants are generated for float utilities. * By default, only responsive variants are generated for float utilities.
*/ */
.float-right /* float: right; */ .float-right /* float: right; */
.float-left /* float: left; */ .float-left /* float: left; */
.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.
* By default, only responsive variants are generated for clear utilities. * By default, only responsive variants are generated for clear utilities.
*/ */
.clear-left /* clear: left; */ .clear-left /* clear: left; */
.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.
* By default, only responsive variants are generated for object-fit utilities. * By default, only responsive variants are generated for object-fit utilities.
*/ */
.object-contain /* object-fit: contain; */ .object-contain /* object-fit: contain; */
.object-cover /* object-fit: cover; */ .object-cover /* object-fit: cover; */
.object-fill /* object-fit: fill; */ .object-fill /* object-fit: fill; */
.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
* ----------
*
*
*/
/*
* Top / Right / Bottom / Left
* ----------
*
*
*/
/*
* Visibility
* ----------
*
*
*/
/*
* Z-Index
* ----------
*
*
*/
/* *******************************************************************************************
* FLEXBOX
* ******************************************************************************************* */
/*
* Flex Direction
* ----------
*
*
*/
/*
* Flex Wrap
* ----------
*
*
*/
/*
* 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
* ----------
*
*
*/