knowledge
/
awesome-cheatsheets
mirror of https://github.com/namibia/awesome-cheatsheets.git
1
1
Fork 0
Code Issues Releases Activity
awesome-cheatsheets/frontend/tailwind.css

734 lines
12 KiB
CSS
Raw Normal View History

docs(tailwind): initialize stylesheet
2020-03-28 18:51:38 +00:00
/* *******************************************************************************************
* TAILWIND.CSS
* DOCUMENTATION: https://tailwindcss.com/
* ******************************************************************************************* */
docs(tailwind): add breakpoints + container + box-sizing
2020-03-28 21:03:51 +00:00
/*
docs(tailwind): object-fit
2020-03-28 22:07:29 +00:00
* Available breakpoints
* ----------
docs(tailwind): add breakpoints + container + box-sizing
2020-03-28 21:03:51 +00:00
* sm: min-width: 640px;
* md: min-width: 768px;
* lg: min-width: 1024px;
* xl: min-width: 1280px;
*/
docs(tailwind): add structure
2020-03-29 10:34:47 +00:00
/* *******************************************************************************************
* LAYOUT
* ******************************************************************************************* */
docs(tailwind): add breakpoints + container + box-sizing
2020-03-28 21:03:51 +00:00
/*
docs(tailwind): rework style
2020-03-28 21:20:11 +00:00
* Container
* ----------
* A component for fixing an element's width to the current breakpoint.
docs(tailwind): add breakpoints + container + box-sizing
2020-03-28 21:03:51 +00:00
*/
docs(tailwind): add structure
2020-03-29 10:34:47 +00:00
.container
docs(tailwind): add overflow
2020-03-28 22:28:07 +00:00
docs(tailwind): add structure
2020-03-29 10:34:47 +00:00
/*
* 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
* ----------
docs(tailwind): position
2020-03-29 10:46:50 +00:00
* Utilities for controlling how an element is positioned in the DOM.
* By default, only responsive variants are generated for position utilities.
docs(tailwind): add structure
2020-03-29 10:34:47 +00:00
*/
docs(tailwind): position
2020-03-29 10:46:50 +00:00
.static /* position: static; */
.fixed /* position: fixed; */
.absolute /* position: absolute; */
.relative /* position: relative; */
.sticky /* position: sticky; */
docs(tailwind): add structure
2020-03-29 10:34:47 +00:00
/*
* 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
* ----------
*
*
*/